How To Add Angular Material In Angular12

What is Angular Material?

Angular Material is a UI library component developed by Google. It is mainly designed for Angular Js. It is very useful for designing applications in a structured manner.  It provides modern web design principles such as responsiveness, portability, device independence, and attractive application. It gives reusable and beautiful components like Cards, Sliders, Tabs, Toolbar, and many more.

Angular Material is developed under MIT License. So, it is free and can be used for commercial development.

Angular Material provides a lot of components which is very tricky to get work correctly. Like Stepper, Paginator, Date picker, Bottom sheet, Chips, Progress spinner, and much more.

Steps for installing Angular Material.

Step 1: Install the Angular CLI using npm.

npm install -g @angular/cli

Step 2: Create a new Angular Project.

ng new Material-Demo

Step 3: Install Angular Material in Project.

ng add @angular/material

When you run this command, you will be asked 3 questions.

1. Choose a prebuilt theme name, or “custom” for a custom theme:

You can select any of them or a custom theme.

2. Set up global Angular Material typography styles? Yes

3. Set up browser animations for Angular Material? Yes

Now you are set up all things and you can use Angular Material.

How to use Angular Material Components.

Always remember that Angular Material is a UI Library Components. So, whenever you need to use its component then give its API reference to the module. You can get API reference on https://material.angular.io/components/categories

Here, we will use some components for the demo.

Import Component in the module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {MatButtonModule} from '@angular/material/button';
import {MatCardModule} from '@angular/material/card';
import {MatExpansionModule} from '@angular/material/expansion';
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule, 
    BrowserAnimationsModule,
    MatCardModule,
    MatButtonModule,
    MatExpansionModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Use Components in HTML

<mat-card>Simple Card</mat-card>

 <mat-expansion-panel>
   <mat-expansion-panel-header>
     <mat-panel-title>
       Self aware panel
     </mat-panel-title>
     <mat-panel-description>
     </mat-panel-description>
   </mat-expansion-panel-header>
   <p>I'm visible because I am open</p>
 </mat-expansion-panel>

<button mat-raised-button color="primary">Primary</button>