Integrate Angular Material in Ionic 3

Angular’s team build Google’s Material design-based framework known as Angular Material. This framework is based on principles of Google material design, you can read more about it here.

This Angular post is compatible with Angular 4 upto latest versions, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11 & Angular 12

Today we will discuss, on how we can fuse the beauty of Angular Material and its powerful components with Ionic 3 framework. At the end of this tutorial, you will be able to build an application which will have components from Angular Material which you can find here.

Let’s begin …

Step 1) Create a new Ionic 3 Application using Ionic cli.

If you already have an application you can continue with that.

Run following commands to create a new app

$ npm install -g [email protected]
$ ionic start Ionic3AngularMaterialDemo blank

Go to the root of the app

$ cd Ionic3AngularMaterialDemo

 

Step 2) Add “Angular Material” modules in Ionic 3 App

We need to add Animations, CDK, and Material module using below command

$ npm install --save @angular/material @angular/cdk @angular/animations

 

Step 3) Configure Ionic 3 App to use Angular material Modules and CSS theme

At the root folder create a new folder “config” with file “copy.config.js“. Paste following content in it

copy.config.js

module.exports = {
    copyMaterialThemeCSS: {
        src: ['{{ROOT}}/node_modules/@angular/material/prebuilt-themes/indigo-pink.css'],
        dest: '{{WWW}}/assets'
    }
}

this will copy the theme file “indigo-pink.css” (you can choose anyone) to Ionic 3’s asset folder from Angular material’s prebuilt four themes.

Add Animation module (BrowserAnimationsModule) in app.module.ts. After adding file will look like this.

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { MyApp } from './app.component';

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    BrowserAnimationsModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

 

Step 4) Now we will add Angular Material components in Home view and we will add a separate module for the “home page”.

create a new file home.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';

import { MatButtonModule, MatCardModule, MatTabsModule, MatChipsModule, MatIconModule, MatToolbarModule, MatDatepickerModule, MatFormFieldModule, MatNativeDateModule } from "@angular/material";

@NgModule({
  declarations: [
    HomePage,
  ],
  imports: [
    IonicPageModule.forChild(HomePage),
    MatButtonModule,
    MatCardModule,
    MatTabsModule,
    MatChipsModule,
    MatIconModule,
    MatToolbarModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatNativeDateModule
  ],
  exports: [
    HomePage
  ]
})
export class HomePageModule {}

home.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

}

home.html

<ion-header>

  <ion-navbar color="primary">
    <ion-title text-center>Angular Material</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  
  <h2>Multi-row toolbar</h2>

  <mat-toolbar color="primary">
    <mat-toolbar-row>
      <span>Custom Toolbar</span>
    </mat-toolbar-row>
  
    <mat-toolbar-row>
      <span>Second Line</span>
      <span class="example-spacer"></span>
      <mat-icon class="example-icon">verified_user</mat-icon>
    </mat-toolbar-row>
  
    <mat-toolbar-row>
      <span>Third Line</span>
      <span class="example-spacer"></span>
      <mat-icon class="example-icon">favorite</mat-icon>
      <mat-icon class="example-icon">delete</mat-icon>
    </mat-toolbar-row>
  </mat-toolbar>

  <h2>Basic datepicker</h2>
  

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

</ion-content>

 

Now run this command to open application

$ ionic serve --open

If everything goes well your page will look like this 🙂

 

If you see some error like this

Then change versions to this in package.json to these:

...
...
  "dependencies": {
    "@angular/animations": "^5.1.1",
    "@angular/cdk": "^5.0.1",
    "@angular/material": "^5.0.1",
...
...

there is some version conflict error due to which it doesn’t work with new versions.

Let me know if you face any error.

Happy coding…

Subscribe
Notify of
guest
1 Comment
Inline Feedbacks
View all comments

[…] Tutorial on How to Use Angular Material in Ionic 3 […]