angular-material

问题 I want to perform password and confirm password validations using material components only,and an error message below the confirm password field if confirm password field doesn't match And if it is empty .Tried many resources unable to achieve. Tried this video too. This is the material component i am looking for HTML <mat-form-field > <input matInput placeholder="New password" [type]="hide ? 'password' : 'text'" [formControl]="passFormControl" required> <mat-icon matSuffix (click)="hide =

问题 In Angular material you have the lovely ripple effect on a lot of the components. When you click on a mat-list-item the ripple effect happens. Now with buttons and many other components you can trigger the ripple effect with button.ripple.launch(...) but with mat-list-item I see no such functionality. I'd like to be able to do it to inform users of changes made to the list. Does anyone know of a workaround? I've tried dispatching 'click' from the MatListItem's _getHostElement(), but to no

问题 I'm trying to sort a MatTable with MatSort of angular material but the problem is I can sort only two columns of my MatTable but what I want is to sorting all my columns and I don't understand why it doesn't work... I can click on the arrow like when I want to sort data of my table but nothing happens except with column multiple and occupation which are sorting well. Here is my code (I'm well importing MatSortModule into my app.module.ts ): csr.component.ts import {AfterViewInit, Component,

问题 i decided to use one of material frameworks in my next Cordova Phonegap Project. but i don't know which one is best for phonegap and works fine in older android versions. Polymer, Materializecss, Angular Material and... Which one is best for Phonegap & Android? 回答1: You can try http://ionicframework.com/ its like Phonegap but you use Angular. You have multiple options with material design and ionic. I am going to test this one soon http://ionicmaterial.com/ 回答2: If you are going to use

问题 I'm using the MatDatepicker from @angular/material ^7.0.0-rc.0, and I made a little complex filter that compares every visible day in the timepicker with every day of an array with about 200 or 300 values. It breaks the aplication every time I switch the datepicker to multi-year view mode. I just want to disable or disallow the multi-year view mode, and let only month mode and year mode working. HTML: <mat-form-field (click)="picker.open()" class="date-field"> <span>{{(dataFields['mosaic_'

问题 I'm using the old AngularJS Material Design Data Table and would like to know how to adjust the column width. https://github.com/daniel-nagy/md-data-table For instance if I wanted to change the 'fat' column in the demo to a fixed width of 40px how would I go about this? Demo: http://codepen.io/anon/pen/BjvLVJ There is a fixed padding which seems to be the main problem. table.md-table.md-row-select td.md-cell:nth-child(n+3):nth-last-child(n+2), table.md-table.md-row-select th.md-column:nth

问题 I am planning to use Angular Material's virtual repeat to achieve a Facebook like functionality where posts infinitely scroll. Is it possible to have the virtual repeat container on the body tag of the HTML document? I don't see how that will work. I have different routes in my SPA app, I will need to add/remove the virtual repeat container on the body dynamically depending on if the page uses infinite scroll or not... What's a viable strategy for implementing md-virtual-repeat for having the

问题 Scenario : I am using Chips Autocomplete component. On selecting the particular option from the list it is displaying the selected option as the chip in the input filed as shown in below image. Todo : I want these chips to be displayed outside the input field, means in any other div.Like below image How can i do this ? Here is the stackblitz link. 回答1: Move <mat-chip> out of <mat-form-field></mat-form-field> <div> <mat-chip *ngFor="let fruit of fruits" [selectable]="selectable" [removable]=

问题 I'm trying to design a form with Angular Material, but when I load everything the input styles doesn't seems to work. This is my code on the HTML <!-- Title Tool Bar with Shadow Lv6 --> <mat-toolbar class="app-header mat-elevation-z6" color="primary"> <!-- Tool Bar Row 1 --> <mat-toolbar-row> <!-- Side Bar Button Opener --> <button mat-icon-button class="app-header-menu-button"> <mat-icon>menu</mat-icon> </button> <!-- Title --> <span class="app-header-title">Théa  </span> <!-- Subtitle -->

问题 I have an example of the date picker where I use Renderer2 in order to scrape the dom and add in a title attribute, giving each day that matches a day from a list of specialDates a tooltip in the calendar pane of the date picker. Is it possible to make this a material tooltip instead? 回答1: So, not a Mat-Tooltip, but I made an example of adding modern CSS tooltips to each day specifically. I also added a dashed border around the days with tooltips. This is the stackblitz I'll mark this as an