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
