How to use Angular Material in Ionic 5?

In this tutorial, we’ll learn how to add Angular Material in Ionic framework. Angular Material is a collection of material design components for an Angular based on Google’s material design specifications. We can easily use the material components in our Ionic angular project.

It is optimized for Angular and can be integrated with an Angular application easily. It provides us with modern UI components that work across multiple platforms such as web, mobile, and desktop.

By default, Ionic has a nice UI component, which is enough for most cases but if you still want to use Angular material in ionic then, we’ll learn in this tutorial.

What is angular material.?

Angular Material is both a UI Component framework and a reference implementation of Google’s Material Design Specification developed by Google in 2014. Material Design is a tool for front-end frameworks, which helps you with visual, motion, and interaction design. It also helps to adapt to different devices and different screen sizes.

The project provides a set of reusable, well-tested, and accessible UI components based on Material Design. These components help in making your application more consistent, fast, versatile, and even designing responsive websites.

Setup and configure angular material in Ionic 5. ?

We can integrate Angular Material in Ionic easily, we have to follow Configuration certain steps.

Step 1: Let first create an Ionic angular project.

With the release of ionic version 4, the Ionic framework is no longer limited to angular, we can create the ionic projects in different front-end frameworks like Angular, Vue, and React. Let’s first create a blank Ionic Angular project

$ionic start 
select angular framework
project name: ionicMaterialApps
template: blank

Step 2: Integrage angular material in Ioinc 5.

Once we have created our Ionic angular project, we will now install and integrate angular material in our project.

ng add @angular/material

The ng add, add support for an external library and here we are installing an Angular material library in our project. Running the above command will allow us to select an Angular material theme for our Ionic project. Here we are selecting the Indigo/Pink theme.

Once we select our angular theme, we have two more options, in both cases, we have to type Y for yes for the option as below.

? Set up global Angular Material typography styles? (y/N) Y
? Set up browser animations for Angular Material? (Y/n) Y

By adding an Angular material in ionic 5, it will automatically import BrowserAnimationsModule in our app.module.ts file.

@NgModule({
  imports: [BrowserAnimationsModule],
})

export class AppModule { }

An example to demonstrate an Angular material in Ionic.?

In our ionic project, we will use Ionic Angular material datepicker, button, form, and SnackBar components of an Angular material in our project.

Registering required material module in ionic component.

Import required angular material component our home component and edit home.module.ts as

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 { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';


@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule,
    MatSnackBarModule,
    MatFormFieldModule,
    MatButtonModule,
    MatInputModule,
    MatDatepickerModule,
    MatNativeDateModule
  ],
  declarations: [HomePage]
})
export class HomePageModule { }

Edit home.page.html component template to include our Angular material component UI

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Ionic 5 Material design
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <mat-form-field>
    <mat-label>Message</mat-label>
    <input matInput value="Disco party!" #message>
  </mat-form-field>

  <mat-form-field>
    <mat-label>Action</mat-label>
    <input matInput value="Dance" #action>
  </mat-form-field>

  <button mat-flat-button color="primary" (click)="openSnackBar(message.value, action.value)">Show snack-bar</button>

  <div class="ion-padding">
    <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>
  </div>
</ion-content>

In-home component typescript we need to import MatSnackBar from angular material. Edit home.page.ts file as

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  constructor(private _snackBar: MatSnackBar) {}

  openSnackBar(message: string, action: string) {
    this._snackBar.open(message, action, {
      duration: 2000,
    });
  }
}

Conclusion
We have explored how to add Angular Material to our ionic project. There are different UI we can use in an Ionic project like bootstrap and Angular material. But the Ionic framework has lots of pre-built components like tables, and grids and these are enough to make a beautiful UI for our Ionic application.

Related Post

• How to implement Angular material form in Angular 11 | 12?
• How to implement the Angular Radio button?
• How to implement Angular checkbox input in Angular 12?