Getting Started With Angular Material

Tudip

12 April 2019

What is the angular material?

Angular Material could be a UI component library for Angular developers. Angular Material provides modern UI components that work across mobile, web and desktop. Angular Material to facilitate the development process through reusability of common components like Cards, beautiful Inputs, Data Tables, and so on.

The angular Material style could be a specification for a unified system of visual, motion, and interaction design that adapts across different devices and different screen sizes. It is creating faster, beautiful, and responsive websites.

Steps to install Angular Material:

• Step 1: Install the Angular CLI
• Step 2: Create a workspace for Angular Project
• Step 3: Install Angular Material, Angular CDK and Angular Animations
• Step 4: Configure animations
• Step 5: Import the Angular Material component modules
• Step 6: Gesture Support

In detail information about steps to install Angular Material:

Step 1: Install the Angular CLI

installed the Angular CLI globally using npm:

 npm install -g @angular/cli

Step 2: Create a workspace for Angular Project

To create a new workspace:

ng new angular-material-app

Step 3: Install Angular Material, Angular CDK and Angular Animations

npm install @angular/material @angular/cdk @angular/animations --save

Using the Angular CLI ng the add command will update your Angular project with the correct dependencies, perform configuration changes and execute initialization code.

ng add @angular/material

Step 4: Configure animations

@NgModule({
  imports: [BrowserAnimationsModule],
})

export class AppModule { }

Step 5: Import the Angular Material component modules

Imports the Angular Material component modules which you need in App.

Below are a few examples.

import { MatAutocompleteModule, MatButtonModule, MatCheckboxModule, MatDatepickerModule, 
MatFormFieldModule, MatInputModule, MatRadioModule, MatSelectModule, MatSliderModule, 
MatSlideToggleModule } from '@angular/material';

@NgModule({
imports: [
     MatAutocompleteModule,
     MatButtonModule,
     MatCheckboxModule,
     MatDatepickerModule,
     MatFormFieldModule,
     MatInputModule,
     MatRadioModule,
     MatSelectModule,
     MatSliderModule,
     MatSlideToggleModule
 ]})

Examples:

Checkbox

<mat-checkbox>Check me!</mat-checkbox>

Radio Button

<mat-radio-group>
   <mat-radio-button value="1">Male</mat-radio-button>
   <mat-radio-button value="2">Female</mat-radio-button>
</mat-radio-group>

Input

<mat-form-field class="col-12">
   <input matInput placeholder="Name" value="Tudip">
</mat-form-field>

Button

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

Card

<mat-card>Material Card</mat-card>

Output

Step 6: Gesture Support

Some components (mat-slide-toggle, mat-slider, matTooltip) rely on HammerJS for gestures.

In order to urge the complete feature-set of those elements, HammerJS should be loaded into the appliance.

 npm install hammerjs --save

Complete installing HammerJS then import it on ‘main.ts’ file

import 'hammerjs';

Read more about the Difference between Angular and React