Angular 4 Material - mat-button style not being applied in mat-dialog component Angular 4 Material - mat-button style not being applied in mat-dialog component typescript typescript

Angular 4 Material - mat-button style not being applied in mat-dialog component


Newly imported modules need to be added to imports:

@NgModule{  ...  imports: [    BrowserModule,    BrowserAnimationsModule,    MatCardModule,    MatDialogModule,    MatButtonModule  ],  ...})


Worth noting that the new angular 9 build system requires you stop the "ng serve" script and run it again after adding a material module


TL;DR
If you have other things working but not a specific component, make sure that component's module is imported & importedcorrectly as modules have to be added to the imports:

@NgModule{  imports: [    MatCardModule,    MatButtonModule  ]})

Explanation:
I had the same issue where I had a CustomMaterialModule where I was importing all the Material Modules I needed to use in my app. I was using mat-button but its style wasn't there. After a few minutes of searching, I found out that I had put MatButtonModule only in imports array of my CustomMaterialModule & not in exports array.

Note: my CustomMaterialModule hosts all the Material Modules I need inmy app so modules like MatButtonModule will go in myCustomMaterialModule imports and exports array and later I would onlyuse my CustomMaterialModule in other places of my app. I did this tokeep the code clean and easy for editing. So for example, if one monthdown the road I don't need a Material Module I can just remove it frommy CustomMaterialModule and not worry about it.