angular-material

问题 I have this table : <div class="table-container"> <table mat-table [dataSource]="dataSource"> <mat-divider></mat-divider> <!-- title column --> <ng-container matColumnDef="title"> <th mat-header-cell *matHeaderCellDef> {{ 'NOTIFYCATION.NOTIFY_TITLE' | translate }} </th> <td mat-cell *matCellDef="let element"> {{element.title}} </td> </ng-container> <!-- code column --> <ng-container matColumnDef="description"> <th mat-header-cell *matHeaderCellDef> {{ 'NOTIFYCATION.DESCRIPTION' | translate }}

问题 I have this table : <div class="table-container"> <table mat-table [dataSource]="dataSource"> <mat-divider></mat-divider> <!-- title column --> <ng-container matColumnDef="title"> <th mat-header-cell *matHeaderCellDef> {{ 'NOTIFYCATION.NOTIFY_TITLE' | translate }} </th> <td mat-cell *matCellDef="let element"> {{element.title}} </td> </ng-container> <!-- code column --> <ng-container matColumnDef="description"> <th mat-header-cell *matHeaderCellDef> {{ 'NOTIFYCATION.DESCRIPTION' | translate }}

问题 I'm fairly new to angular in general, i have built my first few apps with it and right now I'm working on some project that contains angular material. When i go to this site i see lots of properties of the MatSelect directive. There is one property called 'empty: boolean' that I would like to access in some way, but i don't know how, can you help me? 回答1: Pay attention to Exported as:matSelect . You can reference it by template reference variable(#var) or by ViewChild: <mat-select #matSelect

问题 I'm fairly new to angular in general, i have built my first few apps with it and right now I'm working on some project that contains angular material. When i go to this site i see lots of properties of the MatSelect directive. There is one property called 'empty: boolean' that I would like to access in some way, but i don't know how, can you help me? 回答1: Pay attention to Exported as:matSelect . You can reference it by template reference variable(#var) or by ViewChild: <mat-select #matSelect

问题 I have Mat table with multiple rows, with add button ,on click of it, adds a new row . i want to add validations for all the rows ,right now my code below is taking a validation only for any one row. my component.html <form [formGroup]="auditUserValidation"> <mat-table [dataSource]="dataSource"> <ng-container matColumnDef="Audit"> <mat-header-cell *matHeaderCellDef> Name </mat-header-cell> <mat-cell *matCellDef="let element"> <mat-select formControlName="name" placeholder="Pls select"> <mat

问题 I'm trying to open a material bottom sheet inside a div container, as default it's opening as the last element inside the body. Looking at the documentation, I need to use the viewContainerRef , but I can't make it work. This is similiar to what I'm trying to do: app.component.html: ... <div #container></div> ... app.component.ts: export class AppComponent implements AfterViewInit { @ViewChild('container', { read: ViewContainerRef }) _container; ... constructor( private bottomSheet:

问题 I'm trying to open a material bottom sheet inside a div container, as default it's opening as the last element inside the body. Looking at the documentation, I need to use the viewContainerRef , but I can't make it work. This is similiar to what I'm trying to do: app.component.html: ... <div #container></div> ... app.component.ts: export class AppComponent implements AfterViewInit { @ViewChild('container', { read: ViewContainerRef }) _container; ... constructor( private bottomSheet:

问题 I am trying to customize the angular material mat-form-field : I was able to customize the underline border using : ::ng-deep.mat-form-field-ripple { background-color: yellow; } now I am trying to customize the underline border in the disabled state to be solid instead of the dashed line : I tried this but it didn't work for underline : ::ng-deep.mat-form-field-disabled { } I want this to be gray solid in disabled state <mat-form-field> <input matInput placeholder="Input" [disabled]='true'> <

问题 Hello i'm having an issue with Angular Material theme breaking in a Dialog Component, where the color of text and other components aren't working in the ways they should. In app.component I have a setting icon button to open a dialog main.settings.dialog but when it opens as seen in the picture below the coloring is not fitting the Dark Theme. Any insight as to why this isn't working in a normal way would be greatly appreciated as i can't find a way to fix this. Live example site Link to full

问题 How to create "custom" own colors for angular material? For example the bootstrap like colors like success (green), warn (yellow), danger (red), beside primary (blue), accent (pink). In other words: Extend the color variablen of Angular Material (2+) for using it in html attributes: <button mat-raised-button color="success">Success</button> or create a white checkbox like: <mat-checkbox color="white">Check me!</mat-checkbox> 回答1: To add a new color named success , make the following changes