Ionic 5 + Angular Material 9 | How to Add Angular Material in Ionic to Use its Components

Angular Material is an awesome UI framework which is fully compatible to work with Angular applications. It is fully loaded with a wide variety of awsome UI components which are supported for responsive and multi-device platforms. There are a number of easy to use components like Autocomplete, Datepicker, Stepper, Tree structures, DataTables, etc which can empower Ionic applications to the next level.

In this tutorial, we will get to know how to install Angular Material UI Components in an Ionic application.

We will first install Material packages in Ionic 5 application then try some of its components. For this, we will create a new Ionic application with a blank template.

Let’s get started!

#Install the latest @ionic/cli package

We’ll create an Ionic application using the latest version of @ionic/cli . Run following npm command to upgrade

$ npm install -g @ionic/cli

 

#Create a New Application

To keep it simple, we'll create a new Ionic application with Angular framework using a blank template. Run this ionic command to create one.

$ ionic start ionic-material-app blank --type=angular

move to the application directory

$ cd ionic-material-app

then open with Visual Studio Code by hitting below command

$ code .

 

#Install Angular Material

After creating the Ionic application, next, we'll install the Angular Material UI library to use its component. Run following npm command in the terminal and answer few configuration related question

$ ng add @angular/material

Choose a theme

? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink [ Preview: https://material.angular.io?theme=indigo-pink ]

Select if you want to install HammerJS to support gesture event.

? Set up HammerJS for gesture recognition? Yes

Answer yes to enable animation

? Set up browser animations for Angular Material? Yes

How to add Angular Material Components in Ionic?

For adding Angular Material components we first need check their Modules then add them in Ionic component's module file.

#Material Expansion Panel

For example, we need to add Expansion panel, then you need to add MatExpansionModule in home.module.ts file as shown below:

//home.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { HomePage } from './home.page';

import { MatExpansionModule } from '@angular/material/expansion';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ]),
    MatExpansionModule

  ],
  declarations: [HomePage]
})
export class HomePageModule {}

After adding in Module in home.page.html add following Expansion directive

  <mat-accordion>
    <mat-expansion-panel>
      <mat-expansion-panel-header>
        <mat-panel-title>
          Personal data
        </mat-panel-title>
        <mat-panel-description>
          Type your name and age
        </mat-panel-description>
      </mat-expansion-panel-header>
      Panel Content
    </mat-expansion-panel>
    <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false">
      <mat-expansion-panel-header>
        <mat-panel-title>
          Self aware panel
        </mat-panel-title>
        <mat-panel-description>
          Currently I am {{panelOpenState ? 'open' : 'closed'}}
        </mat-panel-description>
      </mat-expansion-panel-header>
      <p>I'm visible because I am open</p>
    </mat-expansion-panel>
  </mat-accordion>

Ionic 5 + Angular Material 9 | How to Add Angular Material in Ionic to Use its Components

 

#Material Datepicker in Ionic Application

To use Material Datepicker in Ionic Application update the home.module.ts file with these modules.

// 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 { HomePageRoutingModule } from './home-routing.module';

import { MatExpansionModule } from '@angular/material/expansion';

import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatNativeDateModule } from '@angular/material/core';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,

    MatExpansionModule,

    MatDatepickerModule,
    MatNativeDateModule,
    MatFormFieldModule,
    MatInputModule
  ],
  declarations: [HomePage]
})
export class HomePageModule { }

All these modules are required to use Material Datepicker. Now in the home.page.html add the mat-datepicker and mat-datepicker-toggle components

<ion-header [translucent]="true">
  <ion-toolbar color="secondary">
    <ion-title>
      Ionic + Material App
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" class="ion-padding">

  <h4>Expansion Panel</h4>

  <mat-accordion>
    <mat-expansion-panel>
      <mat-expansion-panel-header>
        <mat-panel-title>
          Personal data
        </mat-panel-title>
        <mat-panel-description>
          Type your name and age
        </mat-panel-description>
      </mat-expansion-panel-header>
      Panel Content
    </mat-expansion-panel>
    <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false">
      <mat-expansion-panel-header>
        <mat-panel-title>
          Self aware panel
        </mat-panel-title>
        <mat-panel-description>
          Currently I am {{panelOpenState ? 'open' : 'closed'}}
        </mat-panel-description>
      </mat-expansion-panel-header>
      <p>I'm visible because I am open</p>
    </mat-expansion-panel>
  </mat-accordion>

  <h4>Datepicker</h4>

  <mat-form-field>
    <mat-label>Choose a date</mat-label>
    <input matInput [matDatepicker]="picker">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>

</ion-content>

That's it now you have successfully installed Material Ui library in Ionic 5 application and we also implemented the Expansion panel and Datepicker in the Home Page. You can now run your application by hitting $ ionic serve --open to see it working.

Ionic 5 + Angular Material 9 | How to Add Angular Material in Ionic to Use its Components

 

 

You can use any Material UI component in Ionic pages, the only thing you need to check about proper API need to be added in the page module file.

 

Subscribe
Notify of
guest
3 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
rafael

ng add @angular/material

David

it would be nice to have material using the ionic color variables and not having to maintain a different theme

Matthew Harris

Great start. It would have helped me to learn more if the “we check which modules” bit linked out to the official docs where that can be checked.

It’s also not clear if the material themes are working in Ionic 4. They are formatted nicely but I’m not seeing any of the colours. Two of them load dark, two of them load light, but they are all grey texts.