What is Angular Material?
Angular Material is a collection of UI components based on Material Design which aims to provide a rich and highly intuitive user experience. It assists developers, designers to build awesome Angular apps quickly and effortlessly.
It comprises a range of components categorized by:
- Form Controls
- Navigation
- Layout
- Buttons and Indicators
- Popups and Modals
- Data Table
For getting started with a new Angular App, follow: https://angular.io/start
Follow these steps to begin using Angular Material with existing Apps
Step 1: Install Angular Material, Angular Animations, Angular Cdk
$ npm install --save @angular/material @angular/animations @angular/cdk
Step 2 (Optional but recommended): Install HammerJS for Gesture Support
Some components like matTooltip, mat-slide-toggle, mat-slider require gesture detection to function properly. HammerJS is a popular library that helps you add support for gestures like tap, swipe, pan, zoom, rotate on your page.
It can be found at https://hammerjs.github.io/
$ npm install --save hammerjs
Import it to your app’s root module.
import 'hammerjs';
Step 3 (Important): Including a pre-built theme in styles.css
@import “~@angular/material/prebuilt-themes/indigo-pink.css”;
Note: It’s mandatory to import a theme to get started with Angular Material. Themes available: deeppurple-amber.css, indigo-pink.css, pink-bluegrey.css, purple-green.css
Step 4: Import Browser Animations
Import Browser Animations Module to your app module for animations support.
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@NgModule({
// …
imports: [BrowserAnimationsModule]
})
export class AppModule { }
Step 5: Import Component modules
Import required component modules. Even though we can add all material components to app.module.ts, this is not recommended. We will add these modules to a separate module say material.module.ts and export it.
import {MatButtonModule} from ‘@angular/material/button’;
import {MatTooltipModule} from ‘@angular/material/tooltip’;
@NgModule({
exports: [
MatButtonModule,
MatTooltipModule,
]
})
export class CustomizedMaterialModule {}
We will include CustomizedMaterialModule wherever Material Components are required. For now let’s include it to our app.module.ts file.
import { CustomizedMaterialModule} from ‘./material.module’;
Step 6(Optional): You can also access Material Design icons using <mat-icon> component.
We will add this to the project’s root index.html file.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Follow this Guide for Material Icons: https://google.github.io/material-design-icons/
Angular Material is ready to use!
We can now use Angular Material components to create a beautiful application without investing too much time thinking about styles.
Checkout Angular Material website to explore components and its implementation: https://material.angular.io/
Example
Here is a basic example for different types of buttons provided by Angular Material. Colours – primary, accent, warn are based on the theme we included earlier. Let’s also add tooltips on buttons which show up on hover.
html file: basic-buttons-example.html
<div class="buttons-container">
<button mat-raised-button matTooltip="Go to next Page"
[matTooltipPosition]="left" aria-label="plain">
OK
</button>
<button mat-raised-button matTooltip="Cancel Selection"
[matTooltipPosition]="top" aria-label="primary" color="primary">
Cancel
</button>
<button mat-mini-fab matTooltip="Valid"
[matTooltipPosition]="right" aria-label="accent" color="accent">
<mat-icon>check</mat-icon>
</button>
<div class="mic-container">
<button mat-fab matTooltip="Say Something"
[matTooltipPosition]="bottom" aria-label="warn" color="warn">
<mat-icon>mic</mat-icon>
</button>
</div>
</div>
CSS file: basic-buttons-example.css
.mic-container {
padding: 30px;
text-align: center;
}
.mat-raised-button {
margin-right: 20px;
}
.buttons-container {
text-align: center;
padding-top: 200px;
padding-bottom: 200px;
}
Component class: basic-buttons-example.ts
import {Component} from '@angular/core';
@Component({
selector: ‘basic-buttons-example’,
templateUrl: ‘basic-buttons-example.html’,
styleUrls: [‘basic-buttons-example.css’],
animations: []
})
export class BasicButtonsExample {
top = ‘above’;
bottom = ‘below’;
left = ‘left’;
right = ‘right’;
}
Yay Here is the result!
TL;DR Angular Material has taken the aesthetics of design to a whole new level with its visually appealing UI while delivering a top-notch UX.
References:
