Angular 2+ theme button colors not working

Question

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.

Answer 1

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

Answer 2

I added material to my project(Angular 9) by using ng add @angular/material and faced the same problem.

To fix it, I add to add below the dependency manually to the package.json:

"@angular/material-moment-adapter": "^9.2.2"

Hope this will help anyone facing issue with newer versions or using ng add command.