angular-material2

问题 I am trying animate an icon inside the title of an expansion panel. My HTML: <mat-expansion-panel-header> <mat-panel-title> <mat-icon [@openClose]="panelOpenState? 'open' : 'closed'">keyboard_arrow_up</mat-icon> Click me, all other animates </mat-panel-title> <mat-panel-description> Type your name and age </mat-panel-description> </mat-expansion-panel-header> My component: @Component({ selector: 'expansion-overview-example', animations: [ trigger('openClose', [ // ... state('open', style({

问题 I am using Angular 6.0.8 with Angular Material theme version 6.4.0 Whenever I try to slightly modify the material theme, it never works, as I always find the material theme properties to overwrite my CSS properties as follows: currentColor .mat-input-element (material theme) initial input, textarea, select, button (user agent stylesheet) #1072BA .English #1072BA .English #1072BA body Only the first property is applied (the rest are striked through) I have tried multiple variations to solve

问题 I am using Angular 6.0.8 with Angular Material theme version 6.4.0 Whenever I try to slightly modify the material theme, it never works, as I always find the material theme properties to overwrite my CSS properties as follows: currentColor .mat-input-element (material theme) initial input, textarea, select, button (user agent stylesheet) #1072BA .English #1072BA .English #1072BA body Only the first property is applied (the rest are striked through) I have tried multiple variations to solve

问题 I have an angular material table(10 rows) for which i want to fix the height to 300px(Vertical scroll should be used to see the extra rows). When i give height in the styles to 300px it is not having any effect. The contents of the table are going out of the height given. See the link for the image. I want to have two tables one below another and i want to give them equal height 50%. The first table itself taking 10 rows height . Angular Material Table 回答1: I use a wrapper div with class <div

问题 I am having a problem using a registered icon in Angular Material 2. I have followed the example of their github repository but without luck. In my AppComponent: constructor(mdIconRegistry: MdIconRegistry, sanitizer: DomSanitizer) { mdIconRegistry .addSvgIcon('thumb-up', sanitizer.bypassSecurityTrustResourceUrl('./thumbup-icon.svg')) } Template: <md-icon svgIcon="thumb-up"></md-icon> In the console, I am getting error "Error retrieving icon: undefined". So it knows it is registered and most

问题 In my use case scenario I have a dropdown box ( mat-select ) which fills several input fields. Any change will fill the fields differently. Since the user could change a field I want to ask the user before the final change is executed if (s)he agree to clear(or change) all fields. In case of a NO the selection change will not happen and all fields should remain. I tried to reduce the use case to a sample. I can select an item from the dropdown and do some further actions. <mat-select

问题 I am using mat-tree with very big data sets in child nodes on API call child having around 3k records and what I am doing is I'm updating the dataSource by adding the children from API under the dataSource and re rendering by this.dataSource.data = updatedDataDource; It is taking more than 15 seconds to re render and it is not acceptable. Is there any way so that I can re render only that node and that associated children from api(I mean kind of partial rendering). Please help if any one have

问题 I was trying to use the Material Angular autocomplete and I came across the displayWith function which can be apparently used to be the output that is displayed on selection. I wanted to call a custom function within the display function like displayFn(id) { return this.getValue(id) } getValue(id) { /**return some string } For the autocomplete <mat-autocomplete #autoOutlet="matAutocomplete" [displayWith]="displayFn"> <mat-option *ngFor="let option of outletFilterOptions | async [value]=

问题 I was trying to use the Material Angular autocomplete and I came across the displayWith function which can be apparently used to be the output that is displayed on selection. I wanted to call a custom function within the display function like displayFn(id) { return this.getValue(id) } getValue(id) { /**return some string } For the autocomplete <mat-autocomplete #autoOutlet="matAutocomplete" [displayWith]="displayFn"> <mat-option *ngFor="let option of outletFilterOptions | async [value]=

问题 I am using angular 4 with angular materials to construct a table. I want the mat-sort-header to be added conditionally on the following template. <mat-header-cell *matHeaderCellDef mat-sort-header>Id</mat-header-cell> I have tried the following code: <mat-header-cell *matHeaderCellDef [mat-sort-header]=" column!='id' ? column : false ">Id</mat-header-cell> But it still adds the sorting header in the table for this column. My overall table looks as follows, and is working fine, except for the