Angular 4 Material - mat-button style not being applied in mat-dialog component
can also be missing a line in styles.css
@import '@angular/material/prebuilt-themes/indigo-pink.css';
Newly imported modules need to be added to imports
:
import { MatButtonModule } from '@angular/material/button'
@NgModule{
...
imports: [
BrowserModule,
BrowserAnimationsModule,
MatCardModule,
MatDialogModule,
MatButtonModule
],
...
})
TL;DR
If you have other things working but not a specific component, make sure that component's module is imported & imported correctly as modules have to be added to theimports
:@NgModule{ imports: [ MatCardModule, MatButtonModule ] })
Note: Remember to stop the "ng serve" script and run it again after adding the material module as the new angular 9 build system requires to do so.
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 in my app so modules like MatButtonModule will go in my CustomMaterialModule imports and exports array and later I would only use my CustomMaterialModule in other places of my app. I did this to keep the code clean and easy for editing. So for example, if one month down the road I don't need a Material Module I can just remove it from my CustomMaterialModule and not worry about it.
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