Example of Angular material design with Ionic 5 (Live Demo + Source)

How to use angular material design with ionic 5?

Add angular material to the ionic application or simple Ionic 5 angular material design tutorial.

We are going to learn this by our tutorial and we have also available a live demo with git repo for source code.

You will get everything for free of cost.

We have used the following components from angular material and you can use other remaining components with the same approach.

1. Toolbar
2. Progress bar
3. Snackbar
4. Chip
5. Card
6. Icon
7. Menu
8. Dialog
9. Input
10. Datepicker
11. Button
12. Badge
13. Table (sort, filter and pagination)
14. Expansion Panel (or accordion)

Live Demo

Add Angular material to our ionic 5 project

Run the following command to add angular material.

ng add @angular/material

After angular material was added to our ionic 5 project, we can import its components anywhere in the project. 

Toolbar Component

Toolbar component is basically the same as the ion-toolbar already available in the ionic framework.

Import the component module file

import {MatToolbarModule} from '@angular/material/toolbar';

In our case it’s home.module.ts where we need to import these components.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';
import {MatToolbarModule} from '@angular/material/toolbar';

import { HomePageRoutingModule } from './home-routing.module';



@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
    MatToolbarModule
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

Component html Syntax

Use the following syntax to use angular material toolbar components.

<mat-toolbar></mat-toolbar>

Progress bar Component

Progress bar is a very useful component when http request is in the processing and data might take time to load.

Import the component module

import {MatProgressBarModule} from '@angular/material/progress-bar';

In our case it’s home.module.ts where we need to import these components.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatProgressBarModule} from '@angular/material/progress-bar';

import { HomePageRoutingModule } from './home-routing.module';



@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
    MatToolbarModule,
    MatProgressBarModule
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

Component html Syntax

Use the following syntax to use angular material progress bar components.

<mat-progress-bar mode="indeterminate"></mat-progress-bar>

When the user clicks on the refresh icon from the header toolbar then we have enabled this progress bar component, for just demonstration.

And after 3 seconds it will hide the progress bar and show our next component that is snackbar.

Snackbar component

Snackbar is basically used to show a notification message in the application. It is similar to the toast, like notify the user about success, failure or warn something.

Import the component module

import {MatSnackBarModule} from '@angular/material/snack-bar';

Again home.module.ts where we need to import these components.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatProgressBarModule} from '@angular/material/progress-bar';
import {MatSnackBarModule} from '@angular/material/snack-bar';

import { HomePageRoutingModule } from './home-routing.module';



@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
    MatToolbarModule,
    MatProgressBarModule,
    MatSnackBarModule
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

Now, snackbar doesn’t need any html syntax. It has some special methods to open the snackbar with some customization properties.

Import the Component to the page

Let’s import the snackbar component to our home.page.ts page and then we have created a method to call the snackbar on a particular action.

import { Component, OnInit } from '@angular/core';
import {
  MatSnackBar,
  MatSnackBarHorizontalPosition,
  MatSnackBarVerticalPosition,
} from '@angular/material/snack-bar';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
  horizontalPosition: MatSnackBarHorizontalPosition = 'start';
  verticalPosition: MatSnackBarVerticalPosition = 'top';

  posts : any = [];
  isProgress : boolean = false;

  constructor(
    private _snackBar: MatSnackBar ) {

    }


  ngOnInit () {
    fetch('assets/data/posts.json').then(resp => resp.json())
    .then(response => {
      this.posts = response;
    })
  }

  showProgressBar() {
    this.isProgress = true;

    setTimeout(() => {
      this.isProgress = false;
      this.openSnackBar();
    }, 3000);
  }

  openSnackBar() {
    this._snackBar.open('Posts updated!!', 'Done', {
      horizontalPosition: this.horizontalPosition,
      verticalPosition: this.verticalPosition,
      duration: 2000
    });
  }

 
}

Snackbar is currently called when the user clicks on the refresh icon from the header toolbar and once the progress bar stops in 3 seconds. So, after the progress bar, a snackbar will be shown for the success message for a few seconds.

Chip Component

Angular material chips design with ionic 5 are very easy to use. Let’s import the module file first.

Import the component module

import {MatChipsModule} from '@angular/material/chips';

In our case it’s home.module.ts where we need to import these components.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatProgressBarModule} from '@angular/material/progress-bar';
import {MatSnackBarModule} from '@angular/material/snack-bar';
import {MatChipsModule} from '@angular/material/chips'; 

import { HomePageRoutingModule } from './home-routing.module';



@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
    MatToolbarModule,
    MatProgressBarModule,
    MatSnackBarModule,
    MatChipsModule
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

Component html syntax

Use the following syntax to use angular material chips components.

<mat-chip-list aria-label="Fish selection">
  <mat-chip>One fish</mat-chip>
</mat-chip-list>

Although it has more advanced usage with input fields, that is a matter of a dedicated article. So, if you want that please comment below, I will definitely design a tutorial for that.

Card Component

Card component is a widely used component. It is basically provides a nice container for other elements. We can use it for user profile, posts, products or for many other purposes.

Import the component module

import {MatCardModule} from '@angular/material/card';

We are using cards to show our posts on our home page. So we need to import this component module to our home.module.ts.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatProgressBarModule} from '@angular/material/progress-bar';
import {MatSnackBarModule} from '@angular/material/snack-bar';
import {MatChipsModule} from '@angular/material/chips'; 
import {MatCardModule} from '@angular/material/card';

import { HomePageRoutingModule } from './home-routing.module';



@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
    MatToolbarModule,
    MatProgressBarModule,
    MatSnackBarModule,
    MatChipsModule,
    MatCardModule
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

Component html syntax

<mat-card>
 <mat-card-header>
  <mat-card-title> title here </mat-card-title>
  <mat-card-subtitle>subtitle here</mat-card-subtitle>
 </mat-card-header>

<mat-card-content>
</mat-card-content>

  <mat-card-actions>
    <button mat-button>action button</button>
    <button mat-button>action button</button>
  </mat-card-actions>
</mat-card>

Icon Component

Angular material icons are the icons used from google material icons. As we know that icons are very important everywhere to improve the look and feel of the application. It makes the application easy to understand. 

Import the component module

import {MatIconModule} from '@angular/material/icon';

Icons are used on the home page footer for the menu, on the post cards and might be other places too. So, it’s home.module.ts where we need to import these components.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatProgressBarModule} from '@angular/material/progress-bar';
import {MatSnackBarModule} from '@angular/material/snack-bar';
import {MatChipsModule} from '@angular/material/chips'; 
import {MatCardModule} from '@angular/material/card';
import {MatIconModule} from '@angular/material/icon'; 

import { HomePageRoutingModule } from './home-routing.module';



@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
    MatToolbarModule,
    MatProgressBarModule,
    MatSnackBarModule,
    MatChipsModule,
    MatCardModule,
    MatIconModule
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

Component html syntax

<mat-icon>home</mat-icon>

Menu Component

Menu component is used to open a small menu on a button event. Like when a user will click on the dots icon of the post it will open the menu. 

Menu can be an easy toolkit in the application because it covers less space and can show the list of menu items whenever needed.

Import the component module

import {MatMenuModule} from '@angular/material/menu';

In our case it’s home.module.ts where we need to import these components.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatProgressBarModule} from '@angular/material/progress-bar';
import {MatSnackBarModule} from '@angular/material/snack-bar';
import {MatChipsModule} from '@angular/material/chips'; 
import {MatCardModule} from '@angular/material/card';
import {MatIconModule} from '@angular/material/icon'; 
import {MatMenuModule} from '@angular/material/menu';

import { HomePageRoutingModule } from './home-routing.module';



@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
    MatToolbarModule,
    MatProgressBarModule,
    MatSnackBarModule,
    MatChipsModule,
    MatCardModule,
    MatIconModule,
    MatMenuModule
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

Component html syntax

<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

Dialog Component

When a user clicks on the menu dots of the post then we can see an open dialog menu item. This menu will open the dialog box with buttons and input fields.

Import the component module

import {MatDialogModule} from '@angular/material/dialog';

In our case it’s home.module.ts where we need to import these components.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatProgressBarModule} from '@angular/material/progress-bar';
import {MatSnackBarModule} from '@angular/material/snack-bar';
import {MatChipsModule} from '@angular/material/chips'; 
import {MatCardModule} from '@angular/material/card';
import {MatIconModule} from '@angular/material/icon'; 
import {MatMenuModule} from '@angular/material/menu';
import {MatDialogModule} from '@angular/material/dialog';

import { HomePageRoutingModule } from './home-routing.module';



@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
    MatToolbarModule,
    MatProgressBarModule,
    MatSnackBarModule,
    MatChipsModule,
    MatCardModule,
    MatIconModule,
    MatMenuModule,
    MatDialogModule
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

Import the component to a page

We need to import this component to our home.page.ts page. But to use the dialog component we need the html page which will be shown in the dialog box.

So, let’s create a page confirmDialogPage and then import this page to our home.page.ts and open the dialog.

ionic g page confirm-dialog 

Open this dialog page with the help of angular dialog component.

import { Component, OnInit } from '@angular/core';
import {
  MatSnackBar,
  MatSnackBarHorizontalPosition,
  MatSnackBarVerticalPosition,
} from '@angular/material/snack-bar';
import {MatDialog} from '@angular/material/dialog';
import { ConfirmDialogPage } from '../confirm-dialog/confirm-dialog.page';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit {
  horizontalPosition: MatSnackBarHorizontalPosition = 'start';
  verticalPosition: MatSnackBarVerticalPosition = 'top';

  posts : any = [];
  isProgress : boolean = false;

  constructor(
    private _snackBar: MatSnackBar, 
    public dialog: MatDialog ) {

    }


  ngOnInit () {
    fetch('assets/data/posts.json').then(resp => resp.json())
    .then(response => {
      this.posts = response;
    })
  }

  showProgressBar() {
    this.isProgress = true;

    setTimeout(() => {
      this.isProgress = false;
      this.openSnackBar();
    }, 3000);
  }

  openSnackBar() {
    this._snackBar.open('Posts updated!!', 'Done', {
      horizontalPosition: this.horizontalPosition,
      verticalPosition: this.verticalPosition,
      duration: 2000
    });
  }

  openDialog() {
    const dialogRef = this.dialog.open(ConfirmDialogPage);

    dialogRef.afterClosed().subscribe(result => {
      console.log(`Dialog result: ${result}`);
    });
  }
}

Input Component

When we work with any kind of form we need input components. We are using the input component to use the datepicker component in the dialog page.

Import the component module

import { MatInputModule } from '@angular/material/input';

If we are using only mat-form-field, even then we need to import the input module.

We are using the input component in our confirmDialog page. So, we need to import the component module to confirmDialog module file.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';
import {MatDialogModule} from '@angular/material/dialog'; 
import {MatIconModule} from '@angular/material/icon'; 
import { MatInputModule } from '@angular/material/input'; 

import { ConfirmDialogPageRoutingModule } from './confirm-dialog-routing.module';

import { ConfirmDialogPage } from './confirm-dialog.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    ConfirmDialogPageRoutingModule,
    MatDialogModule,
    MatIconModule,
    MatInputModule
  ],
  declarations: [ConfirmDialogPage]
})
export class ConfirmDialogPageModule {}

Component html syntax

<mat-form-field mat-menu-item class="example-full-width" appearance="fill">
    <mat-label>Select the date</mat-label>
    <input matInput name=”date”>
</mat-form-field>

Date picker Component

Date picker is a calendar with an input field to select the date. We are using this datepicker in the confirm dialog page. 

To use angular material date picker, we need to import its module only and then html syntax will be enough.

Note: we need two modules here one is MatDatepickerModule and other is MatNativeDateModule.

Import the component module

import {MatDatepickerModule} from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';

We are using this datepicker in our confirmDialog page. So, we need to import this module to confirmDialog.module.ts.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';
import {MatDialogModule} from '@angular/material/dialog'; 
import {MatIconModule} from '@angular/material/icon'; 
import { MatInputModule } from '@angular/material/input'; 
import {MatDatepickerModule} from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';

import { ConfirmDialogPageRoutingModule } from './confirm-dialog-routing.module';

import { ConfirmDialogPage } from './confirm-dialog.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    ConfirmDialogPageRoutingModule,
    MatDialogModule,
    MatIconModule,
    MatInputModule,
    MatDatepickerModule,
    MatNativeDateModule
  ],
  declarations: [ConfirmDialogPage]
})
export class ConfirmDialogPageModule {}

Component html syntax

<mat-form-field mat-menu-item class="example-full-width" appearance="fill">
    <mat-label>Select the date</mat-label>
    <input matInput [matDatepicker]="picker">
    <mat-datepicker-toggle matSuffix [for]="picker">
      <mat-icon matDatepickerToggleIcon>date_range</mat-icon>
    </mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Buttons Component

Buttons are a very common component in every application. We need to import the button module to our page and then we can use html syntax to use angular material buttons.

Import the component Module

import { MatButtonModule } from '@angular/material/button';

We are importing this module to our confirmDialog module.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';
import {MatDialogModule} from '@angular/material/dialog'; 
import {MatIconModule} from '@angular/material/icon'; 
import { MatInputModule } from '@angular/material/input'; 
import {MatDatepickerModule} from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { MatButtonModule } from '@angular/material/button';

import { ConfirmDialogPageRoutingModule } from './confirm-dialog-routing.module';

import { ConfirmDialogPage } from './confirm-dialog.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    ConfirmDialogPageRoutingModule,
    MatDialogModule,
    MatIconModule,
    MatInputModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatButtonModule
  ],
  declarations: [ConfirmDialogPage]
})
export class ConfirmDialogPageModule {}

Component html syntax

<button mat-button>Cancel</button>

Badges Component

Badges are used to express something like new notifications, unread messages, likes, comments etc.

We are using the badges in the application footer for unread messages. It is a red circle over the message icon.

Let’s import its related module to use this angular material design with ionic 5.

Import the component Module

import { MatBadgeModule } from '@angular/material/badge';

We are importing it to our home.module.ts because we are using this badge component in our application footer.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { HomePage } from './home.page';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatProgressBarModule} from '@angular/material/progress-bar';
import {MatSnackBarModule} from '@angular/material/snack-bar';
import {MatChipsModule} from '@angular/material/chips'; 
import {MatCardModule} from '@angular/material/card';
import {MatIconModule} from '@angular/material/icon'; 
import { MatBadgeModule } from '@angular/material/badge';

import { HomePageRoutingModule } from './home-routing.module';



@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
    MatToolbarModule,
    MatProgressBarModule,
    MatSnackBarModule,
    MatChipsModule,
    MatCardModule,
    MatIconModule,
    MatBadgeModule
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

Component html syntax

We can use the badges as attributes of the element on which we want to show the badge. Like in our case we want to show it on the message icon. So, the syntax will be as follows.

<button class="wh-3" mat-icon-button>
    <mat-icon matBadge="7" matBadgeColor="accent">mail</mat-icon>
 </button>

Table Component

Angular material table component is very useful to demonstrate the data with datatable features. We can use sort, filter and pagination features with this component.

We have already written an article about it, which is an Ionic table with sort, filter and pagination.

Expansion Panel Component

Expansion panel is a component which allows us to create a list of data. We can expand and collapse this data because of this feature it will save our application view space.

We have already written an article about the ionic 5 accordion with an expansion panel.

Hope you enjoy this article.

See you in the next learning journey.