How To Create Material Design In Angular


In this article, we will learn to create a new Angular 11 project using ng new command and then we will install material design using ng add command. After that we will create a simple matTabs example in Visual Studio code.
Step 1
Create an Angular project setup using the below commands or however you create your Angular app
ng new samplemat
How To Create Material Design In Angular 
Step 2
Open a new terminal and run the following below commands
Install Angular Material,
Install Material module in Your App.
ng add @angular/material
ng add command will install Angular Material, the Component Dev Kit (CDK) and Angular Animations
They will ask some question on installation,
  • Choose a prebuilt theme name, or "custom" for a custom theme:
You can choose from prebuilt material design themes or set up an extensible custom theme.
  • Set up global Angular Material typography styles:
Whether to apply the global typography styles to your application.
  • Set up browser animations for Angular Material:
Importing the BrowserAnimationsModule into your application enables Angular's animation system. Declining this will disable most of Angular Material's animations.
The ng add command will additionally perform the following configurations,
  • Add project dependencies to package.json
  • Add the Roboto font to your index.html
  • Add the Material Design icon font to your index.html
  • Add a few global CSS styles to:
  • Remove margins from body
  • Set height: 100% on html and body
  • Set Roboto as the default application font
Now we are done and Angular Material is now configured to be used in our application.
How To Create Material Design In Angular 
Step 3 - App.module.ts
Now we will declarae material in app.module.ts
  1. import { NgModule } from '@angular/core';  
  2. import { BrowserModule } from '@angular/platform-browser';  
  3. import { BrowserAnimationsModule } from '@angular/platform-browser/animations';  
  4. import {  
  5.   MatTabsModule,  
  6.   MatButtonModule,  
  7.   MatToolbarModule  
  8. } from '@angular/material';  
  10. import { AppComponent } from './app.component';  
  11. @NgModule({  
  12.   imports:      [ BrowserModule, BrowserAnimationsModule, MatTabsModule, MatButtonModule, MatToolbarModule ],  
  13.   declarations: [ AppComponent ],  
  14.   bootstrap:    [ AppComponent ]  
  15. })  
  16. export class AppModule { }  
Step 4
Now, we will write integartion on App.component.html
  1. <p>  
  2.   Material Tabs ui  
  3. </p>  
  4. <mat-toolbar>  
  5.   Get the change event!  
  6. </mat-toolbar>  
  7. <mat-tab-group style="margin-bottom: 20px;" #changeEvent (selectedIndexChange)="tabChanged($event)">  
  8.   <mat-tab label="Tab 1">Tab 1</mat-tab>  
  9.   <mat-tab label="Tab 2">Tab 2</mat-tab>  
  10. </mat-tab-group>  
  11. <mat-toolbar>  
  12.   Get the tabs  
  13. </mat-toolbar>  
  14. <mat-tab-group #selectTabs>  
  15.   <mat-tab label="Tab 1">Tab 1</mat-tab>  
  16.   <mat-tab label="Tab 2">Tab 2</mat-tab>  
  17.   <mat-tab label="Tab 3">Tab 3</mat-tab>  
  18. </mat-tab-group>  
Step 5
Next, we can open the app.component.ts and write some code.
  1. import { Component, OnInit, AfterViewInit, ViewChild, ViewChildren, QueryList } from '@angular/core';  
  2. import {MatTabGroup} from '@angular/material'  
  3. @Component({  
  4.   selector: 'my-app',  
  5.   templateUrl: './app.component.html',  
  6.   styleUrls: [ './app.component.css' ]  
  7. })  
  8. export class AppComponent implements OnInit, AfterViewInit  {  
  9.   ngOnInit() {  
  10.   }  
  11.   @ViewChildren("selectTabs") selectTabs: QueryList<any>    
  12.   ngAfterViewInit() {  
  13.     console.log('total tabs: ' + this.selectTabs.first._tabs.length);  
  14.   }  
  15.   tabChanged(tabChangeEvent: number) {  
  16.     console.log('tab selected: ' + tabChangeEvent);  
  17.   }  
  18. }  
In style.scss
  1. /* Add application styles & imports to this file! */  
  2. @import '~@angular/material/theming';  
  3. @include mat-core();  
  4. $candy-app-primary: mat-palette($mat-blue);  
  5. $candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);  
  6. $candy-app-warn:    mat-palette($mat-red);  
  7. $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);  
  8. @include angular-material-theme($candy-app-theme);   
Step 6
Now we will run the application,
ng serve --port 1223
How To Create Material Design In Angular 
On successful execution of the above command, it will show the browser,
How To Create Material Design In Angular

Recommended Ebook

Hands-On With AngularJS Using ASP.NET

Download Now!
Similar Articles