Search code examples
angularthemes

Angular 2+ theme button colors not working

I have a stackblitz example here that I believe is set up following the Angular theming documentation, and yet the colors in the following code are not displaying:

<button mat-raised-button color="primary">Primary</button>
<button mat-raised-button color="accent">Accent</button>
<button mat-raised-button color="warn">Warn</button>
<button mat-raised-button disabled>Disabled</button>

What's more, I'm brand new to stackblitz and can't find where the body tag is (it's not in index.html?!), so I assigned the my-app tag the class,"mat-app-background":

<my-app class="mat-app-background">loading</my-app>

I have looked through several SO entries (e.g. this)and github issues pages (e.g., this), and none seem to be relevant to my issue or current. Any help is much appreciated.

Solution

  • All you forgot here was to import MatButtonModule like:

    import {MatButtonModule} from '@angular/material/button';

    and then off-course in import array

    imports: [ BrowserModule, FormsModule, MatButtonModule ]

    in your app.module.ts since you have single module here.

    Also, be sure to import a theme too in styles.css

    @import '@angular/material/prebuilt-themes/deeppurple-amber.css';

    Here's stackblitz