How to Integrate Angular Material in Ionic Apps

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.org/latest/

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.

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 blank

Step 2 – Then add Material JS and CSS files in our ionic app.

Install Libraries

bower install ionic-material

Install Fonts( from Google ):

bower install robotodraft

Files can also be downloaded from here https://github.com/zachfitz/Ionic-Material

Step 3 – Add JS and CSS libs in out Ionic index.html page.

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…