Proper way to Use Angular Material in Angular project
In this article, we going to see how to use Angular Material in your Angular project. Angular Material is created for Angular to minimize the UI works. Using Angular Material components help to build beautiful, compatible, and modern UI components. This will run for all browsers with Mobile and Web applications. Angular Material comes with flexible UI components and responsive design also with fast and optimized for Angular.
Getting Started with Angular App
Before using Angular Material first you need to install the Angular App. The best way to create your Angular project using Command Line Interface (CLI), for that here you have an article for installing an Angular app.
Install Angular Material from NPM in your Angular App
Once you installed the Angular App below you have the command to install Angular Material properly. Use the following steps to build your Angular Material App.
Step 1
The below command helps to install Material, CDK and Animation packages.
|
1 |
npm install --save @angular/material @angular/cdk @angular/animations |
Step 2
Once you installed all the packages now import the Material CSS file in your main style.css file. Angular Material providing 4 types of themes that you can use any one style in your application. Below you have the code, use one of the theme in your application.
|
1 2 3 4 |
/* @import "[email protected]/material/prebuilt-themes/indigo-pink.css"; */ /* @import "[email protected]/material/prebuilt-themes/pink-bluegrey.css"; */ /* @import "[email protected]/material/prebuilt-themes/purple-green.css"; */ |
Step 3
After that import BrowserAnimationsModule in your app.module.ts file. The browser Animations supports Animations in your Angular project.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Step 4
Now the main thing is Material Module, they are various Module in the Angular Material like Buttons, Autocomplete, Checkbox, Datepicker and more. Here we going to use MatButtonModule, use the following command to import MatButtonModule in your app.module.ts file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import {MatButtonModule} from '@angular/material/button'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatButtonModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Step 5
Install Hammer JS using the below command.
|
1 |
npm i --save hammerjs |
Step 6
Import Hammer JS in your src/main.ts file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app/app.module'; import { environment } from './environments/environment'; // Hammer JS import 'hammerjs'; if (environment.production) { enableProdMode(); } platformBrowserDynamic().bootstrapModule(AppModule) .catch(err => console.error(err)); |
Step 7
Now add the below Material Icons CDN in your index.html which helps to use default Material Design Icons in your Angular Application.
|
1 |
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> |
Step 8
After adding the Material Icons CDN, now import MatIconModule in your app.module.ts file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import {MatButtonModule} from '@angular/material/button'; import {MatIconModule} from '@angular/material/icon'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule, MatButtonModule, MatIconModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Step 9
Once you completed all these steps now it is time to add HTML buttons with Angular Material Attribute, which creates beautiful buttons and icons in your Angular App. Add the below code for display buttons and icons.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
<h3>Basic Buttons</h3> <div class="example-button-row"> <button mat-button>Basic</button> <button mat-button color="primary">Primary</button> <button mat-button color="accent">Accent</button> <button mat-button color="warn">Warn</button> <button mat-button disabled>Disabled</button> <a mat-button routerLink=".">Link</a> </div> <h3>Raised Buttons</h3> <div class="example-button-row"> <button mat-raised-button>Basic</button> <button mat-raised-button color="primary">Primary</button> <button mat-raised-button color="accent">Accent</button> <button mat-raised-button color="warn">Warn</button> <button mat-raised-button disabled>Disabled</button> <a mat-raised-button routerLink=".">Link</a> </div> <h3>Stroked Buttons</h3> <div class="example-button-row"> <button mat-stroked-button>Basic</button> <button mat-stroked-button color="primary">Primary</button> <button mat-stroked-button color="accent">Accent</button> <button mat-stroked-button color="warn">Warn</button> <button mat-stroked-button disabled>Disabled</button> <a mat-stroked-button routerLink=".">Link</a> </div> <h3>Flat Buttons</h3> <div class="example-button-row"> <button mat-flat-button>Basic</button> <button mat-flat-button color="primary">Primary</button> <button mat-flat-button color="accent">Accent</button> <button mat-flat-button color="warn">Warn</button> <button mat-flat-button disabled>Disabled</button> <a mat-flat-button routerLink=".">Link</a> </div> <h3>Icon Buttons</h3> <div class="example-button-row"> <button mat-icon-button aria-label="Example icon-button with a heart icon"> <mat-icon>favorite</mat-icon> </button> <button mat-icon-button color="primary" aria-label="Example icon-button with a heart icon"> <mat-icon>favorite</mat-icon> </button> <button mat-icon-button color="accent" aria-label="Example icon-button with a heart icon"> <mat-icon>favorite</mat-icon> </button> <button mat-icon-button color="warn" aria-label="Example icon-button with a heart icon"> <mat-icon>favorite</mat-icon> </button> <button mat-icon-button disabled aria-label="Example icon-button with a heart icon"> <mat-icon>favorite</mat-icon> </button> </div> <h3>Fab Buttons</h3> <div class="example-button-row"> <button mat-fab>Basic</button> <button mat-fab color="primary">Primary</button> <button mat-fab color="accent">Accent</button> <button mat-fab color="warn">Warn</button> <button mat-fab disabled>Disabled</button> <button mat-fab aria-label="Example icon-button with a heart icon"> <mat-icon>favorite</mat-icon> </button> <a mat-fab routerLink=".">Link</a> </div> <h3>Mini Fab Buttons</h3> <div class="example-button-row"> <button mat-mini-fab>Basic</button> <button mat-mini-fab color="primary">Primary</button> <button mat-mini-fab color="accent">Accent</button> <button mat-mini-fab color="warn">Warn</button> <button mat-mini-fab disabled>Disabled</button> <button mat-mini-fab aria-label="Example icon-button with a heart icon"> <mat-icon>favorite</mat-icon> </button> <a mat-mini-fab routerLink=".">Link</a> </div> |
Execute the Angular App
Now run your application with the ng serve command and see how it looks like, below here you have an example screenshot.
Conclusion:
I hope in this article, you learned step by step to install and configure the Angular Material packages and their dependencies. Here we used only buttons components, in the following articles I show you other components with examples.
