Is there a tutorial for using Ionic and Angular Material?

New problem: ng-clicks are broken in 0.7.1 + Ionic.
Their new stable version 0.7.1 will NOT work with Ionic components properly on Chrome emulate / or real touch devices (Android tested).

After 0.7.0 they removed hammer.js dependency (now = built in), and things probably collide with Ionic’s similar approach?

Symptoms:

  • open your Codepen, change angular_material version from 0.6.1 to 0.7.1
  • remove hammer - or leave it / does not make a difference, but it is not needed in 0.7.1 anyway. Btw, you had two ending < / script > tags there.

The md-button seems to work.
Seemingly, Ionic buttons still work, but if you open in emulate / or real device - the clicks are not propagating properly. The button moves (i.e. gets “activated” class) but ng-clicks are broken.

Too bad, had already integrated md-buttons into one of my Ionic projects.

1 Like

@mikkokam - I just ran into this issue today. Very unfortunate issue, I’ve opened an issue on GitHub, I didn’t see one referencing the new versions. So maybe get some feedback there.

1 Like

Hi,

Is there any update?
I ran in the same issue.
In additional it seems like the propagation doesn’t work in general when mixing ionic and angular-material.
-> ng-click doesn’t work for all none-md elements.

I haven’t seen any updates, you might want to ask on GitHub and see if they have any work around. Until then I’m rolling back to ng-material 0.7.0 which is a bummer :frowning:

Rolled back to 0.7.0, too. But today decided to start tracking down the reasons, since I eventually have to upgrade before app launch anyhow.

I had a hunch this problem is due to the way ionic and now 0.7.1 are both watching for clicks/taps. Now that they both have their own built-in ways instead of hammer.js, they end up preventing one to get the click if the other one captures it?


QUICK FIX:

Please note, that I have not pinpointed what the real problem is, but found a way to at least make my menu work (ion-items with ng-hrefs and a few buttons with ng-clicks). Side-effect: the items no longer get the ‘activated’ class, so might switch the ion-list and ion-items to md-list and md-items.

Take a look at:
http://ionicframework.com/docs/api/page/tap/
and then add data-tap-disabled=“true” to any element around the problem elements.
I added it around my menu and it made the menu work. Shall also test adding it to a few problem buttons refusing to fire - or maybe the whole page? There seems to be no 300 ms delay (the md- handlers might take care of this?) so data-tap is not needed for that.

<div data-tap-disabled="true">
    <div id="google-map"></div>
</div>

Remaining mystery:

Made a clean simple (2 buttons only) Codepen with 0.7.1 and Ionic beta-14. The ng-clicks work. It might be more complex cases when you start hitting these problems.

Appreciate the quick fix, I just pulled the #master from ng-material and the issue still exists but using the data-tap-disabled resolved the click events for my app entirely. Just FYI, with md-radio-group you have to use this also.
Thanks @mikkokam

Also - ng-tabs seems to need this.

1 Like

Really Really really appreciate this quickfix <3

Thank you very much @mikkokam

any updates on this? thanks!

Hello,

data-tap-disabled=“true” introduces other issues like no more scrolling of the page.

I have checked the Angular Material GitHub and they stated they will fix this issue in 0.9.0 release, which is about to be released around March 13th.
Meanwhile there is a quick fix for this, which can be found here: https://github.com/angular/material/issues/1528#issuecomment-74651540

Regards

for the record, it now works without the workarrounds using the rawgit references.
see the last section of the readme here:

later edit: no longer working, I guess that’s the risk with rawgit repo.

Check out this new add-on library: http://ionicmaterial.com/

1 Like

@smkhalsa how is it performance-wise?

@vicmota Haven’t used it yet. It’s still in the very early stages.

Just an update for anyone else who is trying to use Angular Material with Ionic (this post shows quite high up when you search “ionic angular material”). angular-material@0.9.0-rc1 and up allows you to disable Angular Material’s click-jacking which to me seems to be the problem. I updated my app.js config like so:

.config(function($stateProvider, $urlRouterProvider, $compileProvider, $mdGestureProvider) {
  $mdGestureProvider.skipClickHijack(); // Don't hijack me bro
  ...

And to my relief, clicking worked again. Whew! So however you’re downloading Angular Material, make sure to specifically install 0.9.0-rc1 or above (latest one as of writing was 0.9.0-rc3).

My app doesn’t use ng-click at all, but even a simple button using href like:

  <a class="button button-block button-outline button-positive" href="#/test-page">
    Test Page
  </a>

Would not work with angular-material@0.8.3 (their latest stable as of writing). The template this button was in had a controller using $mdToast. Oddly enough, in another template that wasn’t using Angular Material at all, its buttons with href worked just fine. I’m not entirely sure why not using an Angular Material directive in a controller results in normal behaviour…

Anyway, hope that helps. It’s midnight here so I hope I’m not rambling too much. :wink:

2 Likes

Use the official angular material site

Hi ,

check this site :smile:

http://ionicmaterial.com/

thx to @zachfitz and all contributions

1 Like

@ItamarCohen Yup, I think ionicmaterial will be the best way to go. However, the readme is lacking and the .min files that the readme references are not in the download files. Any idea how I can get started?

they will release an api documents until then you can do what i did

start reading the code :smile:

Guys, as @ItamarCohen & @tpalmer75 mentioned i think this will help https://github.com/zachsoft/Ionic-Material
here’s the ionic material design demo