Ionic 4 + Angular Material 8 | How to Install Material and Use its Components in Ionic App

Angular Material is an awesome UI framework which is fully compatible to work with Angular applications. It is fully loaded with We Components which are supported for responsive and multi-device platforms. There is a number of easy to use components like Autocomplete, Datepicker, Stepper, Tree structures, Data tables, 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 4 application then try some of its components. For this, we will create a new Ionic 4 application with a blank template.

Let’s get started!

Create a New Application

First, create a new Ionic 4 application with a blank template using Ionic CLI tool.

Install Material Packages

To use Angular Material components we need to install Material, CDK and Animation packages by running following command:

Material Animations Module

Animations like the ripple effect which adds to the beauty of controls need animations module.

In Ionic application, open app.module.ts file to import then add BrowserAnimationsModule in imports array:

Add Material Theme in Ionic

Angular Material provides already built four themes:

  • deeppurple-amber.css
  • indigo-pink.css
  • pink-bluegrey.css
  • purple-green.css

You need to import any of these theme files in Ionic’s global.scss file:

 

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.

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

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

Now you can check your Ionic application by running in the browser:

In a similer way, you can add any Material component in Ionic 4 application.

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

Leave a Reply

avatar
  Subscribe  
Notify of