How to add Material in Angular project

In this article I am going to explain how to add Material in Angular project.

 Angular material is an UI component library.  It is an alternative to bootstrap for Angular application. It provides modern UI components that work across mobile, web and desktop. It is Versatile, Fast and Consistent. You can read more about material component from its website : https://material.angular.io/

Prerequisite :

Visual studio code

 How to create hello world application with Angular  

 

Let’s add the Angular material to application.

Run the below given command in terminal:

ng add @angular/material

After run the command, it will ask few questions like prebuild theme, typography and animations. Please make sure select the options as given below:

 

 

Now import the Angular material component in application which you want to use. Here in this example I am going to use Matcard and Matbutton module.

Complete code of app.module.ts file

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppRoutingModule } from './app-routing.module'; 
import { AppComponent } from './app.component'; 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
import { MatButtonModule} from '@angular/material/button';
import {MatCardModule } from '@angular/material/card'; 

@NgModule({ 

  declarations: [ 
    AppComponent 
  ], 

  imports: [ 
    BrowserModule, 
    AppRoutingModule, 
    BrowserAnimationsModule,MatButtonModule,MatCardModule 
  ],   

  exports: [ 
    MatButtonModule, 
     MatCardModule 
  ], 

  providers: [], 
  bootstrap: [AppComponent] 
}) 

export class AppModule { } 

  

Now open the app.component.html file and add the code as given below:

 

<mat-card> 
  <button mat-button>Home</button> 
  <button mat-raised-button>ASP.NET</button> 
  <button mat-raised-button color="primary">Angular</button> 
  <button mat-raised-button color="accent">SQL SERVER</button> 
</mat-card> 
<router-outlet></router-outlet>

 

Run the application. Go to terminal and run the application.

ng serve --open

 

Angular CLI commands