How To Create Material Design In Angular

Introduction

 

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

 

 

 

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.

 

 

 

Step 3 - App.module.ts

 

Now we will declarae material in app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {
  MatTabsModule,
  MatButtonModule,
  MatToolbarModule
} from '@angular/material';

import { AppComponent } from './app.component';
@NgModule({
  imports:      [ BrowserModule, BrowserAnimationsModule, MatTabsModule, MatButtonModule, MatToolbarModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Step 4

 

Now, we will write integartion on App.component.html

<p>
  Material Tabs ui
</p>
<mat-toolbar>
  Get the change event!
</mat-toolbar>
<mat-tab-group style="margin-bottom: 20px;" #changeEvent (selectedIndexChange)="tabChanged($event)">
  <mat-tab label="Tab 1">Tab 1</mat-tab>
  <mat-tab label="Tab 2">Tab 2</mat-tab>
</mat-tab-group>
<mat-toolbar>
  Get the tabs
</mat-toolbar>
<mat-tab-group #selectTabs>
  <mat-tab label="Tab 1">Tab 1</mat-tab>
  <mat-tab label="Tab 2">Tab 2</mat-tab>
  <mat-tab label="Tab 3">Tab 3</mat-tab>
</mat-tab-group>

Step 5

 

Next, we can open the app.component.ts and write some code.

import { Component, OnInit, AfterViewInit, ViewChild, ViewChildren, QueryList } from '@angular/core';
import {MatTabGroup} from '@angular/material'
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit, AfterViewInit  {
  ngOnInit() {
  }
  @ViewChildren("selectTabs") selectTabs: QueryList<any>
  ngAfterViewInit() {
    console.log('total tabs: ' + this.selectTabs.first._tabs.length);
  }
  tabChanged(tabChangeEvent: number) {
    console.log('tab selected: ' + tabChangeEvent);
  }
}

In style.scss

/* Add application styles & imports to this file! */
@import '~@angular/material/theming';
@include mat-core();
$candy-app-primary: mat-palette($mat-blue);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
$candy-app-warn:    mat-palette($mat-red);
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
@include angular-material-theme($candy-app-theme);

Step 6

 

Now we will run the application,

 

ng serve --port 1223

 

 

 

On successful execution of the above command, it will show the browser,