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

2
Leave a Reply

avatar
2 Comment threads
0 Thread replies
2 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
DavidMatthew Harris Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Matthew Harris
Member
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.

David
Guest
David

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