Angular Material Easy Installation with Angular 8/9
In the Angular 8/9, there are a lot of things changed with the Command Line Interface (CLI) and other Directives, Angular Ivy, Dependency Injection and much more. When comes to building the User Interface (UI) here the Angular Material providing more facilities to build the Mobile and Web Applications. Angular Material offers the best and beautiful UI Components also it was fully developed for Angular and the usage of Angular Material is rapidly growing day by day.
In this article, I show you Angular Material easy Installation with Angular 8/9. In the Angular 8/9, it is easy to install the Angular Material with the simple steps with the default dependencies you can step up your project quickly. Below you have step by step instructions to configure your Angular Material project.
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 using NPM in your Angular App
Step 1
After setup your Angular project now it is time to install Angular Material using the following NPM command.
|
1 |
ng add @angular/material |
Step 2
Once the Angular Material installed in your project it automatically suggest you to install supporting files for your Angular project.
Like the below, you get the suggestion for the Angular Material prebuilt theme. Select any one of the theme to proceed.
|
1 2 3 4 5 6 7 |
Installed packages for tooling via npm. ? Choose a prebuilt theme name, or "custom" for a custom theme: (Use arrow keys) ❯ Indigo/Pink [ Preview: https://material.angular.io?theme=indigo-pink ] Deep Purple/Amber [ Preview: https://material.angular.io?theme=deeppurple-amber ] Pink/Blue Grey [ Preview: https://material.angular.io?theme=pink-bluegrey ] Purple/Green [ Preview: https://material.angular.io?theme=purple-green ] Custom |
After installed prebuilt theme now set up HammerJS by using "Y" command, this will install automatically in your node_modules.
|
1 2 3 |
Installed packages for tooling via npm. ? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink [ Preview: https://material.angular.io?theme=indigo-pink ] ? Set up HammerJS for gesture recognition? (Y/n) Y |
Next, you need to set up browser animations for your Angular Material for that enter "Y" command to complete the step.
|
1 2 3 4 |
Installed packages for tooling via npm. ? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink [ Preview: https://material.angular.io?theme=indigo-pink ] ? Set up HammerJS for gesture recognition? Yes ? Set up browser animations for Angular Material? (Y/n) Y |
Once you completed the above steps you can see all the modules imported automatically in your Angular project. Example: In your app.module.ts you can see the BrowserAnimationsModule imported automatically, Hammer JS imported in main.ts and your theme file imported in angular.json. This is the good advantages in Angular 8 and 9.
Step 3
Create custom Angular Material file in src > app > as angular-material.ts. The purpose of creating this file to maintain all Angular Material UI Components in one place, this will help to reduce your work.
Now open the file from src > app > angular-material.ts and add the following code.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import { NgModule } from '@angular/core'; import { MatButtonModule } from '@angular/material'; import {MatIconModule} from '@angular/material/icon'; @NgModule({ imports: [ MatButtonModule, MatIconModule ], exports: [ MatButtonModule, MatIconModule ] }) export class AngularMaterial { } |
In the above angular-material.ts file you can see they are two Modules imported from the Angular Material one is MatButtonModule and another one MatIconModule. So finally the angular-material.ts exported as "AngularMaterial" and this will be imported in app.module.ts.
Step 4
Now open app.module.ts and import AngularMaterial in your Angular project. Below you can see the imported AngularMaterial.
|
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 AngularMaterial import { AngularMaterial } from './angular-material'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule, AngularMaterial ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
Step 5
In the final step, you need to add the following Material Button varieties HTML code in your app.component.html. If you want to know more about the Button Component here you have the link.
|
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> |
Now run the your Angular App by using ng serve, Once compiled successfully now open http://localhost:4200/ and see the output. Here below you can see the output screenshot.
Conclustion:
I hope in this article, you learned the Angular Material easy installation with Angular 8/9. Here we used only buttons components, in the following articles I show you other components with examples.
