It looks like you forgot to import the MatDialogModule into your AppModule (at least I don’t see it in the list of imports provided). For future reference, the first line of the API documentation tab will tell you the module(s) you need to import.
In angular material, md-sidenav has these attributes: width: 304px; min-width: 304px; That’s why the width will be fixed at 304 px no matter what device you use. So if you want to change your sidenav width you’ll have to change the css a bit. If you’re fine with supporting only modern browsers, you can change … Read more
A very simple answer would be to sort by the GroupID, this will put those rows together in groups. However, I’m guessing you want a header row displayed before each group. You can provide an alternative <mat-row *matRowDef=”… that uses a where clause. This can be used to display a non-default set of columns. The … Read more
You can use ::ng-deep selector to achieve what you want, this answer has some info on it. How I did it: CSS ::ng-deep .mat-progress-bar-fill::after { background-color: #1E457C; } ::ng-deep .mat-progress-bar-buffer { background: #E4E8EB; } ::ng-deep .mat-progress-bar { border-radius: 2px; } HTML <mat-progress-bar mode=”determinate” value=”{{progress}}”></mat-progress-bar> And the result is this: EDIT: I found a way to … Read more
Add the import in your module.ts file and add it to imports (if you use several module.ts files, add it in the one which is responsible for your component). import { MatTabsModule } from ‘@angular/material’; @NgModule({ imports: [ … MatTabsModule, … ], declarations: [ … ], providers: [] }) export class AppModule {}
Angular seems to fix issues with animation after version 4.4.1. Updating to 4.4.1 should resolve the issue.
For those who may need a similar approach. Here’s my solution. I’ve built a custom validation rule according to my needs. SELECTBOX_VALUE: [ null, Validators.compose([ Validators.required, FormCustomValidators.valueSelected(this.myArray), ]), ]; export class FormCustomValidators { static valueSelected(myArray: any[]): ValidatorFn { return (c: AbstractControl): { [key: string]: boolean } | null => { let selectboxValue = c.value; let … Read more
I’m on angular-material 0.8, and I simply added style=”color:white;font:bold;” to the md-icon element.
Angular Material documentation for chips includes a nice example of how to get started with a multiple selection autocomplete: <mat-form-field class=”example-chip-list”> <mat-chip-list #chipList> <mat-chip *ngFor=”let fruit of fruits” [selectable]=”selectable” [removable]=”removable” (removed)=”remove(fruit)”> {{fruit}} <mat-icon matChipRemove *ngIf=”removable”>cancel</mat-icon> </mat-chip> <input placeholder=”New fruit…” #fruitInput [formControl]=”fruitCtrl” [matAutocomplete]=”auto” [matChipInputFor]=”chipList” [matChipInputSeparatorKeyCodes]=”separatorKeysCodes” [matChipInputAddOnBlur]=”addOnBlur” (matChipInputTokenEnd)=”add($event)”> </mat-chip-list> <mat-autocomplete #auto=”matAutocomplete” (optionSelected)=”selected($event)”> <mat-option *ngFor=”let fruit of filteredFruits … Read more
The perceived padding is being caused by display: table-cell; and vertical-align: inherit; (which usually is value middle) from the default browser/user-agent <td> styles in combination with a height being set on the tr.mat-row. The <tr> with CSS class .mat-row has a set height by default of 48px. You can adjust the height or set to … Read more