Ionic and Angular Material (for angular 4)

Hi,

I have been trying to use Ionic 3 with Angular material and I have a couple of bugs on the md-slider:
https://material.angular.io/components/slider/overview

On my application the slider cursor doesn’t follow the mouse but only moves on mouse release.

I integrated hammerjs in main.ts as stated on the install of Angular Material but still no luck:
https://material.angular.io/guide/getting-started

It is quite bothering me. Any idea? Is Ionic being not compatible with hammerJS?

Not an expert but I think that Ionic is shipped with a built-in hammerjs or at least dependency

May I ask, why using material to build a slider when Ionic offer a slider out of the box?

1 Like

Maybe there is an incompatibility then…

I am using material because I need a vertical slider, something ionic doesn’t provide…

Maybe it’s possible to rotate 90° the Ionic slider with the use of css?

Just an idea…

No, it was impossible. I ended up reworking everything with D3…

Good to hear you found a solution :+1:

Has anyone found a solution to use the Angular Material and Ionic?
This is something I am interested in too.
I have built a demo app and it works fine deploying locally.
I have some issues to release and it doesn’t compile some Angular Material libraries properly.
Does anyone have more experience or any best practices to combine these libraries?

The latest Ionic (3.9.2) and Angular Material update (5.0.1) with Angular 5 (5.0.1) seem to fix A LOT of bugs for me :slight_smile:

1 Like

I found this:

http://ionicmaterial.com/

But this one’s made in 2015… so I guess it won’t be compatible with 2017 version Ionic?

I want to know how to use Angular Material on Ionic as well. It causes errors when I try to use it on Ionic.
Angular Material is a gold mine… it has lots of useful, classy components which Ionic doesn’t have.
And all of them are optimized for mobile!
Why not make Angular Material compatible with Ionic?

I submitted requests to Ionic team here:

I have a Question that how to integrate Angular4Material in Ionic3.
I am looking to use AngularMaterial
AngularMaterial in Ionic3 Project.

I know that Ionic3 Already comes with Material Design but few components were not good in Ionic3 especially Select Menu, Autocomplete etc…
So i want to use MaterialSelect Menu https://material.angular.io/components/select/overview1

Autocomplete https://material.angular.io/components/autocomplete/overview1

from AngularMaterial?

I tried to integrate this in my project. But not working.
Previously in Angular1Material and Ionic1 combo its working.

But in Ionic3 How to Achieve This?

Please help me on this.

If its worked means we can give awesome designs using AngularMaterial compare to ionc material.

Thank you.

I would suggest staying far away from Angular Material, because it will be at odds with the new structure for Ionic 4. If you want to use anything in this vein, I would look at angular-mdc-web instead, because it should fit more naturally with the future direction of Ionic.

1 Like

Many Thanks bro.
I will look into angular-mdc-web and get back to you.
If i use angular-mdc-web in ionic3 its wont make any problems right?
Thanks

angular-mdc-web with ionic3 also not working.
Can you please send me some sample examples if you have?