Angular Material Syntax

How to Apply Angular Material into Angular application?
By using angular command:
ng add '@angular/material'

How to start using angular material:
Step-1:
Import any module from angular material like MatButtonModule into app.modules.ts.

Step-2:
add MatButtonModule in imports array.

Step-3:
Use the directives in Html.

Ex:

<button mat-raised-button>Click Me</button>

<button mat-button>Click Me</button>

Note:

In the above approach suppose if we have to import so many modules from angular material then it will create so many imports. So to avoid this problem and keep the app.module clean and simple.

we will add all the required material modules in a separate module and only that module we will import into app.module.

To create a new module
ng g m materialModule

import { NgModule } from '@angular/core';

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

const materialComponent = [MatButtonModule]

@NgModule({

imports: [materialComponent],

exports: [materialComponent]

})

export class MaterialModuleModule { }

import { MaterialModuleModule } from './material-module/material-module.module';

imports: [

BrowserModule,

BrowserAnimationsModule,

MaterialModuleModule

],

Typography:

This is for setting the style and appearance of text.

<button mat-raised-button>Click Me</button>

<p>This is for page level Heading</p>

<div class="mat-display-4">This is display 4</div>

<div class="mat-display-3">This is display 3</div>

<div class="mat-display-2">This is display 2</div>

<div class="mat-display-1">This is display 1</div>

<p>This is for section level Heading</p>

<div class="mat-headline">This is heading for h1</div>

<div class="mat-title">This is heading for h2</div>

<div class="mat-subheading-2">This is heading for h3</div>

<div class="mat-subheading-1">This is heading for h4</div>

<p>This is for normal text writing</p>

<div class="mat-body-1">This is heading for body</div>

<div class="mat-body-2">This is heading for body</div>

<div class="mat-caption">This is heading for body</div>