Angular Material is a UI component library for Angular developers. Angular Material components help build attractive, consistent, and functional web pages and web applications while adhering to modern web design principles such as browser portability, device independence, and graceful degradation.

Install Angular Material

To set up the Angular Material project by running the following the command

ng add @angular/material

The above command will install the Angular Material and ask you the below-listed question to determine which features to include.

• choose a prebuilt theme name, or “custom” for a custom theme

• Set up global Angular Material typography styles

• set up browser animations for Angular Material

You can navigate to the Angular material documentation by clicking the below link

(material.angular.io)

In the Angular Component, You can see the list of components on your left side like Button, Dialog, Expansion Panel, by using these components the developers will develop the Angular front end.

In General, when you click on any component it has three tabs, Overview, API, Examples. Overview tells about the component like what is the component about, what are the methods it has like that. In the. In the API tab, there is a reference API that we should import into our module, this reference API is unique for each Angular Material Component. In the Example tab, there is multiple reference example with TS code, HTML Code and CSS Styling.

Let’s see the Example Angular Material Component how to import in the real-time application

Let’s take Angular Material Button. Follow the steps below to import the Angular Material Button in the application.

• Import the API from the Angular Material Component to the Default app module or you can generate the separate module for all the Angular Material and export the same.

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

• In the component.html add the following code

<div class="example-label">Basic</div>
<div class="example-button-row">
<button mat-button>Basic</button>
</div>

Inside the button, the tag should add the attribute for button-like mat-button, mat-raised-button, mat-flat-button, mat-stroked-button, mat-icon-button, mat-fab, mat-min-fab. These attributes will do the specific action while adding the button tag.

Save the code with ctl+s and start the Angular server with the command ng serve. We know Angular will run in the default server 4200