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.

Inopportune

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

Overby

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.

Margaux

Answer 3

For me buttons are working fine in Angular 12, but buttons are showing white in color(colors not applied eg: primary etc..)

command :

 ng add @angular/material

working fine for me now.

Sanford

Answer 4

Just restart the application once it will work.

Tollman

Answer 5

Try like this:

npm install @angular/material-moment-adapter

did the trick for me (Angular 12). Also, import locations have changed:

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

Bohs

Answer 6

Event after importing MatButtonModule if didn't work for me(button color wasn't there), when I imported FormsModule & ReactiveFormsModule it worked.

Pieplant