A few months back I was working on a project using Angular Material, believe me, guys angular Material is really an amazing framework which does not only create responsive apps with bootstrap structural design but it also adds a pinch of elegance to an application making it more beautiful to look at. It is gaining a lot of attention of developer due to a huge increasing in it’s demand.
You can visit Angular Materials and see it working https://material.angularjs.
Motion and ripple effects make my day… 
Aham … Let’s move to Ionic, a few days back I just found a library with which make my dream come true to fuse beautification of Material design in ionic apps.
Tutorial on How to Use Angular Material in Ionic 3
You can visit here http://ionicmaterial.com/ to see Zach Fitzgerald’s wonderful fusion of Ionic+Material.
IonicMaterial can easily be used with existing Ionic apps.
So let’s start to add some Motion to you Ionic app
Step 1 – We will start from the very beginning like first we will create a new Ionic.
ionic start ionicMaterial blankStep 2 – Then add Material JS and CSS files in our ionic app.
Install Using Bower:
Install Libraries
bower install ionic-materialInstall Fonts( from Google ):
bower install robotodraftInstall Manually:
Files can also be downloaded from here https://github.com/zachfitz/
Step 3 – Add JS and CSS libs in out Ionic index.html page.
UPDATE: In ionic 3 we can add js & Css file in “assets” folder to link in “index.html”
Our HTML in header section will look something like this:
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="lib/ionic-material/dist/ionic.material.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic-material/dist/ionic.material.min.js"></script>
Step 4 – Inject Ionic Material into your Ionic App.
var app = angular.module('YOUR_APP_NAME', ['ionic', 'ionic-material']);
That’s all you need to do for adding Material to your Ionic app.
In my next post, I will explain “How to Add Animation in Ionic Material App”
See you…
Category: Ionic Framework
In which file i need to change for below?
Step 4 – Inject Ionic Material into your Ionic App
Hi where do you putthis line var app = angular.module(‘YOUR_APP_NAME’, [‘ionic’, ‘ionic-material’]);
I am on typescript.
Hi Dennis, please check this link for Ionic in Typescript
can you help me to integrate angular 6 Material with ionic 3
i tried many ways but not working.
Try this link
Hi,
I tried to follow your instructions on my latest app (ionic 3) but it seems not working.
Does this tutorial work on ionic 3 apps as well. Because, what I can see in my app is that I can not find “lib” folder anywhere.
I am new to ionic so please help me out here.
Hi Vaibhav, the latest version of Ionic 3 is having a bit different file structure. So here you can put file(JS & CSS) in “assets” folder and link those files in “index.html”. Hope this will work 🙂