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 the getting started guide of the angular material tutorial.

Components:

You will learn the following components through this tutorial. You can click on the following components to jump to that section.

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

Put the following code into the 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 the 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:

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

Put the following code into the 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 a container where you can put text, images, videos, actions, etc.

Put the following code into the 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 a list of items using <mat-list>.

Put the following code into the 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 it for styling a line separator

Put the following code into the 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 the 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 it for arranging cells into the grid-based layout.

Put the following code into the 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 the 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 in a separate view using tabs. You can give names for tabs by setting labels. The active tab is designed with an animated ink bar by default. Also, the animation is applied by default when the user clicks from one tab to another.

Put the following code into the 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 the 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 the following code into the 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 the 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 the following code into the 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 the 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 the matBadgeColor property. Using matBadgeColor property you can then give colors like a primary, accent, or warn.

Icons

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

Put the following code into the 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 the app.module.ts file.
I have already imported MatIconModule at the start.

Output:

Progress Spinner

You can use it 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 the progress-spinner by color property. progress-spinner uses the theme’s primary color. You can set colors as ‘primary’, ‘warn’, ‘accent’.

Put the following code into the 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 the 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 it as a horizontal indicator for progress and activity.

Progress Mode:

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

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

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

Buffer:
Buffer mode is 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 the following code into the 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 the 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 the following code into the 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 the following code into the 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 the 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.

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

Put the following code into the 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 the 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.

Components:

Toolbar

Menu

Cards

List

Divider

Grid List

Tabs

Buttons

Badge

Icons

Progress Spinner

Progress mode:

Progress bar

Progress Mode:

SnackBar

Tooltip

Getting Problems ?

Share this:

Related