Angular Material Tutorial

Angular material offers many components. In this angular material tutorial, you will learn different components like toolbar, menu, cards, buttons, icons, progress spinner, progress bar, snackbar, etc and how to implement them.
If you are new to learning angular-material, check out getting started guide of the angular material tutorial.

Toolbar

You can put headers, titles, or actions into one container using <mat-toolbar>.

Put following code into app.component.html file.

<div style="background: #eee8e8;">
  <mat-toolbar color="primary">
    <a style="color: white; text-decoration:none" target="_blank" href="https:www.devconquer.com">DevConquer</a>

    <button mat-icon-button>
      <mat-icon>account_circle</mat-icon>
    </button>
  </mat-toolbar>
</div>

You have to import MatToolbarModule into your app.module.ts file for proper working. I have created a separate module material.module.ts for importing and exporting angular material components and I imported that module into app.module.ts
Note: I have also imported MatIconModule and MatButtonModule as I have used a profile icon button.
See the code below.

import { NgModule } from '@angular/core';

import {
  MatToolbarModule,
  MatIconModule,
  MatButtonModule
} from '@angular/material';

@NgModule({
  imports: [
    MatToolbarModule,
    MatIconModule,
    MatButtonModule
  ],
  exports: [
    MatToolbarModule,
    MatIconModule,
    MatButtonModule
  ]
})
export class MaterialModule { }

Now you have to import MaterialModule into app.module.ts file.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MaterialModule } from './material.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MaterialModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now run your project to see the output.

Output:

Menu

You can show floating panel with list of options using <mat-menu>.

Put following code into app.component.html file.

<div style="background: #eee8e8;">
  <mat-toolbar color="primary">
    <a style="color: white; text-decoration:none" target="_blank" href="https:www.devconquer.com">DevConquer</a>

    <button mat-icon-button [mat-menu-trigger-for]="menu">
      <mat-icon>account_circle</mat-icon>
    </button>
  </mat-toolbar>
  <mat-menu x-position="before" #menu="matMenu">
    <button mat-menu-item>Profile</button>
    <button mat-menu-item>Logout</button>
  </mat-menu>
</div>

You have to import MatMenuModule now into material.module.ts and export it. If you have not created a separate module then you only have to import MatMenuModule into app.module.ts

import { NgModule } from '@angular/core';

import {
  MatToolbarModule,
  MatIconModule,
  MatMenuModule
} from '@angular/material';

@NgModule({
  imports: [
    MatToolbarModule,
    MatIconModule,
    MatMenuModule
  ],
  exports: [
    MatToolbarModule,
    MatIconModule,
    MatMenuModule
  ]
})
export class MaterialModule { }

Now run your project to see the output.

Output:

Cards

<mat-card> is container where you can put text, images, videos, actions, etc.

Put following code into app.component.html file.

<mat-card style="max-width: 400px;">
    <h2>Eiffel Tower</h2>
    <img mat-card-image
      src="https://images.unsplash.com/photo-1502602898657-3e91760cbb34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80"
      alt="">
    <mat-card-content>
      The Eiffel Tower is a wrought-iron lattice tower on the Champ de Mars in Paris, France. It is named after the
      engineer Gustave Eiffel, whose company designed and built the tower.
    </mat-card-content>

    <mat-card-actions>
      <button mat-button>
        <mat-icon>thumb_up</mat-icon>
        Like
      </button>
      <button mat-button>
        <mat-icon>share</mat-icon>Share
      </button>
    </mat-card-actions>
  </mat-card>

You have to import MatCardModule now into material.module.ts and export it. If you have not created a separate module then you only have to import MatCardModule into app.module.ts

import { NgModule } from '@angular/core';

import {
  MatToolbarModule,
  MatIconModule,
  MatButtonModule,
  MatMenuModule,
  MatCardModule
} from '@angular/material';

@NgModule({
  imports: [
    MatToolbarModule,
    MatIconModule,
    MatButtonModule,
    MatMenuModule,
    MatCardModule
  ],
  exports: [
    MatToolbarModule,
    MatIconModule,
    MatButtonModule,
    MatMenuModule,
    MatCardModule
  ]
})
export class MaterialModule { }

Now run your project to see the output.

Output:

List

You can create list of items using <mat-list>.

Put following code into app.component.html file.

<mat-list>
  <mat-list-item role="listitem">List Item 1</mat-list-item>
  <mat-list-item role="listitem">List Item 2</mat-list-item>
  <mat-list-item role="listitem">List Item 3</mat-list-item>
</mat-list>

You have to import MatListModule now into material.module.ts and export it. If you have not created a separate module then you only have to import MatListModule into app.module.ts

import { NgModule } from '@angular/core';

import {
  MatToolbarModule,
  MatIconModule,
  MatButtonModule,
  MatMenuModule,
  MatCardModule,
  MatListModule
} from '@angular/material';

@NgModule({
  imports: [
    MatToolbarModule,
    MatIconModule,
    MatButtonModule,
    MatMenuModule,
    MatCardModule,
    MatListModule
  ],
  exports: [
    MatToolbarModule,
    MatIconModule,
    MatButtonModule,
    MatMenuModule,
    MatCardModule,
    MatListModule
  ]
})
export class MaterialModule { }

Now run your project to see the output.

Divider

You can use for styling of a line separator

Put following code into app.component.html file.

<mat-list>
    <mat-list-item>List Item 1</mat-list-item>
    <mat-divider></mat-divider>
    <mat-list-item>List Item 2</mat-list-item>
    <mat-divider></mat-divider>
    <mat-list-item>List Item 3</mat-list-item>
  </mat-list>

You have to import MatDividerModule now into material.module.ts and export it. If you have not created a separate module then you only have to import MatDividerModule into app.module.ts file.

import { NgModule } from '@angular/core';

import {
  MatToolbarModule,
  MatIconModule,
  MatButtonModule,
  MatMenuModule,
  MatCardModule,
  MatListModule,
  MatDividerModule
} from '@angular/material';

@NgModule({
  imports: [
    MatToolbarModule,
    MatIconModule,
    MatButtonModule,
    MatMenuModule,
    MatCardModule,
    MatListModule,
    MatDividerModule
  ],
  exports: [
    MatToolbarModule,
    MatIconModule,
    MatButtonModule,
    MatMenuModule,
    MatCardModule,
    MatListModule,
    MatDividerModule
  ]
})
export class MaterialModule { }

Now run your project to see the output.

Output:

Grid List

You can use for arranging cells into grid-based layout.

Put following code into app.component.html file.

  <mat-grid-list cols="2" rowHeight="2:1">
    <mat-grid-tile style="background: skyblue;">1</mat-grid-tile>
    <mat-grid-tile style="background: grey;">2</mat-grid-tile>
    <mat-grid-tile style="background: skyblue;">3</mat-grid-tile>
    <mat-grid-tile style="background: grey;">4</mat-grid-tile>
  </mat-grid-list>

You have to import MatGridListModule now into material.module.ts and export it. If you have not created a separate module then you only have to import MatGridListModule into app.module.ts file.

import { NgModule } from '@angular/core';

import {
  MatToolbarModule,
  MatIconModule,
  MatButtonModule,
  MatMenuModule,
  MatCardModule,
  MatListModule,
  MatDividerModule,
  MatGridListModule
} from '@angular/material';

@NgModule({
  imports: [
    MatToolbarModule,
    MatIconModule,
    MatButtonModule,
    MatMenuModule,
    MatCardModule,
    MatListModule,
    MatDividerModule,
    MatGridListModule
  ],
  exports: [
    MatToolbarModule,
    MatIconModule,
    MatButtonModule,
    MatMenuModule,
    MatCardModule,
    MatListModule,
    MatDividerModule,
    MatGridListModule
  ]
})
export class MaterialModule { }

Now run your project to see the output.

Tabs

You can show your content into separate view using tabs. You can give names for tabs by setting labels. Active tab is designed with animated ink bar by default. Also animation is applied by default when user clicks from one tab to another.

Put following code into app.component.html file.

<mat-tab-group>
    <mat-tab label="First"> Content for tab 1 </mat-tab>
    <mat-tab label="Second"> Content for tab 2 </mat-tab>
    <mat-tab label="Third"> Content for tab 3 </mat-tab>
  </mat-tab-group>

You have to import MatTabsModule now into material.module.ts and export it. If you have not created a separate module then you only have to import MatTabsModule into app.module.ts file.

import { NgModule } from '@angular/core';

import {
  MatToolbarModule,
  MatIconModule,
  MatButtonModule,
  MatMenuModule,
  MatCardModule,
  MatListModule,
  MatDividerModule,
  MatGridListModule,
  MatTabsModule
} from '@angular/material';

@NgModule({
  imports: [
    MatToolbarModule,
    MatIconModule,
    MatButtonModule,
    MatMenuModule,
    MatCardModule,
    MatListModule,
    MatDividerModule,
    MatGridListModule,
    MatTabsModule
  ],
  exports: [
    MatToolbarModule,
    MatIconModule,
    MatButtonModule,
    MatMenuModule,
    MatCardModule,
    MatListModule,
    MatDividerModule,
    MatGridListModule,
    MatTabsModule
  ]
})
export class MaterialModule { }

Now run your project to see the output.

Buttons

Buttons are important for user actions. Many types of buttons are provided by angular material. They are Basic, Raised, Stroked, Flat, Icon, Fab, and Mini Fab buttons.

Put following code into app.component.file and run your project to see the output.

<mat-card style="display: flex; justify-content: space-around;">
    <button mat-button color="primary">Primary</button>
    <button mat-raised-button color="primary">Primary</button>
    <button mat-stroked-button color="primary">Primary</button>
    <button mat-flat-button color="primary">Primary</button>
    <button mat-icon-button color="primary">
      <mat-icon>favorite</mat-icon>
    </button>
    <button mat-fab color="primary">Primary</button>
    <button mat-mini-fab color="primary">Primary</button>
  </mat-card>


  <div>
    <h3 style="text-align: center;">Action buttons</h3>
    <mat-card style="display: flex; justify-content: space-around;">
      <button mat-raised-button color="warn">Cancel</button>
      <button mat-raised-button color="primary">Save</button>
      <button mat-raised-button color="accent">Delete</button>
    </mat-card>
  </div>

You have to import MatButtonModule now into material.module.ts and export it. If you have not created a separate module then you only have to import MatButtonModule into app.module.ts file.
I have already imported MatButtonModule at the start.

Output:

Badge

A badge is a UI element used as a notification status description. A badge is a small circle usually containing a number or other set of characters to show how many notifications are present.

Put following code into app.component.html file.

<div style="text-align: center;">
  <p>
    <span matBadge="2" matBadgeOverlap="false">Text</span>
  </p>
  <p>
    <button mat-raised-button color="primary" matBadge="5" matBadgePosition="before" matBadgeColor="accent">
      Action Button
    </button>
  </p>
  <p>
    <mat-icon matBadge="10" matBadgeColor="warn">home</mat-icon>
  </p>
</div>

You have to import MatBadgeModule now into material.module.ts and export it. If you have not created a separate module then you only have to import MatBadgeModule into app.module.ts file.

import { NgModule } from '@angular/core';

import {
  MatToolbarModule,
  MatIconModule,
  MatButtonModule,
  MatMenuModule,
  MatCardModule,
  MatListModule,
  MatDividerModule,
  MatGridListModule,
  MatTabsModule,
  MatBadgeModule
} from '@angular/material';

@NgModule({
  imports: [
    MatToolbarModule,
    MatIconModule,
    MatButtonModule,
    MatMenuModule,
    MatCardModule,
    MatListModule,
    MatDividerModule,
    MatGridListModule,
    MatTabsModule,
    MatBadgeModule
  ],
  exports: [
    MatToolbarModule,
    MatIconModule,
    MatButtonModule,
    MatMenuModule,
    MatCardModule,
    MatListModule,
    MatDividerModule,
    MatGridListModule,
    MatTabsModule,
    MatBadgeModule
  ]
})
export class MaterialModule { }

Now run your project to see the output.

Output:

Position:
Badge position can be changed using property matBadgePosition with giving value like above|below and before|after. By default position is above after.

Color:
You can change the color of badges using matBadgeColor property. Using matBadgeColor property you can then give colors like a primary, accent or warn.

Icons

You can use vector-based icons easily into you app using mat-icon. mat-icon supports both SVG icons and icon fonts and, but not bitmap-based formats like png, jpg, etc.

Put following code into app.component.file and run your project to see the output.

 <div>
    <h3 style="text-align: center;">Icons</h3>
    <mat-card style="display: flex; justify-content: space-around;">
      <mat-icon>home</mat-icon>
      <mat-icon>dashboard</mat-icon>
      <mat-icon>settings_applications</mat-icon>
      <mat-icon>account_circle</mat-icon>
      <mat-icon>notifications</mat-icon>
      <mat-icon>refresh</mat-icon>
    </mat-card>
  </div>

You have to import MatIconModule now into material.module.ts and export it. If you have not created a separate module then you only have to import MatIconModule into app.module.ts file.
I have already imported MatIconModule at the start.

Output:

Progress Spinner

You can use and as a circular indicators for progress and activity.

Progress mode:

Progress spinner has two modes ‘determinate’ and ‘indeterminate’. The ‘determinate’ is a standard progress indicator that shows progress from 0% to 100%. indeterminate mode indicates that something is happening without showing how much progress or activity has happened.
The default mode is “determinate”. You have to set progress by value property which can be the whole number between 0 to 100.
The ‘indeterminate’ mode is used in operations where the user has to wait while something finishes and it is not necessary to indicate the user how long it would take to finish the process. In the ‘indeterminate’ mode, the value property is ignored.

You can change the color of progress-spinner by color property. progress-spinner uses the theme’s primary color. You can set colors as ‘primary’, ‘warn’, ‘accent’.

Put following code into app.component.html file.

<h2 style="text-align: center;">Progress spinner</h2>
  <div style="display: flex; justify-content: space-around;">
    <mat-progress-spinner mode="indeterminate">
    </mat-progress-spinner>
    <mat-progress-spinner color="warn" mode="indeterminate">
    </mat-progress-spinner>
    <mat-progress-spinner color="accent" mode="indeterminate">
    </mat-progress-spinner>
    <mat-progress-spinner color="accent" mode="determinate" value="70">
    </mat-progress-spinner>
  </div>

You have to import MatProgressSpinnerModule now into material.module.ts and export it. If you have not created a separate module then you only have to import MatProgressSpinnerModule into app.module.ts file.

import { NgModule } from '@angular/core';

import {
  MatToolbarModule,
  MatIconModule,
  MatButtonModule,
  MatMenuModule,
  MatCardModule,
  MatListModule,
  MatDividerModule,
  MatGridListModule,
  MatTabsModule,
  MatBadgeModule,
  MatProgressSpinnerModule
} from '@angular/material';

@NgModule({
  imports: [
    MatToolbarModule,
    MatIconModule,
    MatButtonModule,
    MatMenuModule,
    MatCardModule,
    MatListModule,
    MatDividerModule,
    MatGridListModule,
    MatTabsModule,
    MatBadgeModule,
    MatProgressSpinnerModule
  ],
  exports: [
    MatToolbarModule,
    MatIconModule,
    MatButtonModule,
    MatMenuModule,
    MatCardModule,
    MatListModule,
    MatDividerModule,
    MatGridListModule,
    MatTabsModule,
    MatBadgeModule,
    MatProgressSpinnerModule
  ]
})
export class MaterialModule { }

Now run your project to see the output.

Output:

Progress bar

You can use as a horizontal indicator for progress and activity.

Progress Mode:

progress-bar has four modes: determinate, indeterminate, buffer and query.

Determinate:
This is default mode. You have to set value to show progress.

Indeterminate:
indeterminate mode is used in operations where user has to wait while something finishes and it is not necessary to indicate user how long it would take to finish process. In “indeterminate” mode, the value property is ignored.

Buffer:
Buffer mode used in operations to indicate some activity or loading from the server. In “buffer” mode, use value to show the progress of the primary bar and use the bufferValue to show the additional buffering progress.

Query:
Query mode is used in operations to indicate pre-loading (until the loading can actually be made).

Put following code into app.component.html file.

<h2 style="text-align: center;">Progress bar</h2>
  <div style="display: grid; grid-gap: 16px;">
    <mat-progress-bar mode="indeterminate">
    </mat-progress-bar>
    <mat-progress-bar color="warn" mode="indeterminate">
    </mat-progress-bar>
    <mat-progress-bar color="accent" mode="indeterminate">
    </mat-progress-bar>
    <mat-progress-bar color="primary" mode="determinate" value="70">
    </mat-progress-bar>
    <mat-progress-bar mode="buffer"></mat-progress-bar>
    <mat-progress-bar mode="query"></mat-progress-bar>
  </div>

You have to import MatProgressBarModule now into material.module.ts and export it. If you have not created a separate module then you only have to import MatProgressBarModule into app.module.ts file.

import { NgModule } from '@angular/core';

import {
  MatToolbarModule,
  MatIconModule,
  MatButtonModule,
  MatMenuModule,
  MatCardModule,
  MatListModule,
  MatDividerModule,
  MatGridListModule,
  MatTabsModule,
  MatBadgeModule,
  MatProgressSpinnerModule,
  MatProgressBarModule
} from '@angular/material';

@NgModule({
  imports: [
    MatToolbarModule,
    MatIconModule,
    MatButtonModule,
    MatMenuModule,
    MatCardModule,
    MatListModule,
    MatDividerModule,
    MatGridListModule,
    MatTabsModule,
    MatBadgeModule,
    MatProgressSpinnerModule,
    MatProgressBarModule
  ],
  exports: [
    MatToolbarModule,
    MatIconModule,
    MatButtonModule,
    MatMenuModule,
    MatCardModule,
    MatListModule,
    MatDividerModule,
    MatGridListModule,
    MatTabsModule,
    MatBadgeModule,
    MatProgressSpinnerModule,
    MatProgressBarModule
  ]
})
export class MaterialModule { }

Now run your project to see the output.

Output:

SnackBar

You can use MatSnackBar as a service for displaying snack-bar notifications.

Put following code into app.component.html file.

<div style="text-align: center;">
    <h2>Snackbar</h2>
    <button mat-raised-button color="primary" (click)="showSnackBar()">Show snack-bar</button>
  </div>

Put following code into app.component.ts file.

import { Component } from '@angular/core';
import { MatSnackBar } from '@angular/material';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-material-part-II';
  constructor(private snackBar: MatSnackBar) { }

  showSnackBar(message: string, action: string) {
    this.snackBar.open('This is snackBar.', '', { duration: 1000 });
  }
}

You have to import MatSnackBarModule now into material.module.ts and export it. If you have not created a separate module then you only have to import MatSnackBarModule into app.module.ts file.

import { NgModule } from '@angular/core';

import {
  MatToolbarModule,
  MatIconModule,
  MatButtonModule,
  MatMenuModule,
  MatCardModule,
  MatListModule,
  MatDividerModule,
  MatGridListModule,
  MatTabsModule,
  MatBadgeModule,
  MatProgressSpinnerModule,
  MatProgressBarModule,
  MatSnackBarModule
} from '@angular/material';

@NgModule({
  imports: [
    MatToolbarModule,
    MatIconModule,
    MatButtonModule,
    MatMenuModule,
    MatCardModule,
    MatListModule,
    MatDividerModule,
    MatGridListModule,
    MatTabsModule,
    MatBadgeModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatSnackBarModule
  ],
  exports: [
    MatToolbarModule,
    MatIconModule,
    MatButtonModule,
    MatMenuModule,
    MatCardModule,
    MatListModule,
    MatDividerModule,
    MatGridListModule,
    MatTabsModule,
    MatBadgeModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatSnackBarModule
  ]
})
export class MaterialModule { }

Now run your project to see the output.

Tooltip

You can use tooltip component to show extra information when user hovers on text label, icon, etc.

Put following code into app.component.html file.

<div style="text-align: center;">
    <mat-icon matTooltip="Extra information">
      help
    </mat-icon>
  </div>

You have to import MatTooltipModule now into material.module.ts and export it. If you have not created a separate module then you only have to import MatTooltipModule into app.module.ts file.

import { NgModule } from '@angular/core';

import {
  MatToolbarModule,
  MatIconModule,
  MatButtonModule,
  MatMenuModule,
  MatCardModule,
  MatListModule,
  MatDividerModule,
  MatGridListModule,
  MatTabsModule,
  MatBadgeModule,
  MatProgressSpinnerModule,
  MatProgressBarModule,
  MatSnackBarModule,
  MatTooltipModule
} from '@angular/material';

@NgModule({
  imports: [
    MatToolbarModule,
    MatIconModule,
    MatButtonModule,
    MatMenuModule,
    MatCardModule,
    MatListModule,
    MatDividerModule,
    MatGridListModule,
    MatTabsModule,
    MatBadgeModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatSnackBarModule,
    MatTooltipModule
  ],
  exports: [
    MatToolbarModule,
    MatIconModule,
    MatButtonModule,
    MatMenuModule,
    MatCardModule,
    MatListModule,
    MatDividerModule,
    MatGridListModule,
    MatTabsModule,
    MatBadgeModule,
    MatProgressSpinnerModule,
    MatProgressBarModule,
    MatSnackBarModule,
    MatTooltipModule
  ]
})
export class MaterialModule { }

Now run your project to see the output.

Output:

Getting Problems ?

If you are getting any problems when implementing components from this angular material tutorial, ask me by commenting.

One Comment

Leave a Reply