Material design not showing angular 12

Question

Material design is not showing up in Angular 12. Hi, I am new to angular (beginner). I tried using some material design element on top of angular 12, but I cannot see the material design changes in my test application.

Here are steps to reproduce:

1. I created an app "test-anugular-mat" using ng new test-anugular-mat.
2. After creating I added angular to the app using ng add @angular/material. Here i have disabled "typography styles" and enabled "browser animations".
3. Added imported MatButton in app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatButton} from '@angular/material/button'

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatButton
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. And added the following in my index.html.

<h1>testing angular material</h1>
<p>testing angular material!!!</p>
<button mat-fab>test button</button>
<mat-card>Simple card</mat-card>

Here is the output I am getting, not the desired angular button or card while using ng serve

So I should get material design, what is the mistake I am doing here ?

Answer 1

You should import MatButtonModule instead of MatButton. See correct import syntax https://material.angular.io/components/button/api

Answer 2

Maybe you mistaken the "tab" in "<button mat-tab ..." ?

Try with

<button mat-button>test button</button>

or

<button mat-fab>test button</button>

EDIT: Are you putting this directly in your "index.html"??? You shoud put your test code in your "app.component.html", not in "index.html"

And for use the material card, you have to import its module as well: import {MatCardModule} from '@angular/material/card';

You have all the info components in HERE