If you just need to add an attribute in order to trigger CSS rules, you can use the below method: (this does not dynamically create/destroy a directive) <button [attr.md-raised-button]=”condition ? ” : null”></button> Applied the same to your plunker: fork Update: How condition ? ” : null works as the value: When its the empty … Read more
For anyone else who may have this problem: The problem was I didn’t read the API reference properly on the angular materials website, the part that said I had to import MatSortModule. After I changed my imports list in app.module.ts to imports: [ BrowserModule, MatTableModule, MatSortModule ], it worked fine
Add CSS stylesheet for Material Icons! Add the following to your index.html: <link href=”https://fonts.googleapis.com/icon?family=Material+Icons” rel=”stylesheet”> Refer – https://github.com/angular/material2/issues/7948
After upgrading to Angular 9 (released today), I ran into this issue as well and found that they made the breaking change mentioned in the answer. I can’t find a reason for why they made this change. I have a material.module.ts file that I import / export all the material components (not the most efficient, … Read more
As far as I know you can use all mentioned technologies separately or together. It’s up to you. I think you look at the problem from the wrong angle. Material Design is just the way particular elements of the page are designed, behave and put together. Material Design provides great UI/UX, but it relies on … Read more
There are two ways to do it. In the method that opens the dialog, pass in the following configuration option disableClose as the second parameter in MatDialog#open() and set it to true: export class AppComponent { constructor(private dialog: MatDialog){} openDialog() { this.dialog.open(DialogComponent, { disableClose: true }); } } Alternatively, do it in the dialog component … Read more
I don’t know if the ChangeDetectorRef was required when the question was created, but now this is enough: import { MatTableDataSource } from ‘@angular/material/table’; // … dataSource = new MatTableDataSource<MyDataType>(); refresh() { this.myService.doSomething().subscribe((data: MyDataType[]) => { this.dataSource.data = data; } } Example: StackBlitz
Angular 9.0.0 < Since 9.0.0 with Ivy, the entryComponents property is no longer necessary. See deprecations guide. Angular 9.0.0 > You need to add dynamically created components to entryComponents inside your @NgModule @NgModule({ declarations: [ AppComponent, LoginComponent, DashboardComponent, HomeComponent, DialogResultExampleDialog ], entryComponents: [DialogResultExampleDialog] Note: In some cases entryComponents under lazy loaded modules will not work, … Read more
I had this issue. I imported MatFormFieldModule at my main module, but forgot to add MatInputModule to the imports array, like so: import { MatFormFieldModule, MatInputModule } from ‘@angular/material’; @NgModule({ imports: [ MatFormFieldModule, MatInputModule ] }) export class AppModule { } More info here.