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.

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

Go to the root of the app

 

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

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

 

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

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.

 

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

home.ts

home.html

 

Now run this command to open application

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:

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…

Leave a Reply

avatar
  Subscribe  
Notify of