Is there a tutorial for using Ionic and Angular Material?

tutorials
1

Is there a tutorial for using Ionic and Angular Material?

6 Likes
2

There is no tutorial par se.
But you can have a look at ng-material and few of the other apps built with Ionic which implements material design.

3

There are no tutorial util now. However, you can make them work together from beta 14.
I added those material javascript files and it worked like a charm

<!-- Angularjs Material design -->
<link rel="stylesheet" href="css/angular-material.css">
    <script src="js/hammer.min.js"></script>
    <script src="js/angular-aria.min.js"></script>
    <script src="js/angular-material.min.js"></script>
5 Likes
4

Have you an example?

5

I created a quick sample here: (http://codepen.io/sondn2010/pen/OPbJmq)
Just an example with reorder button, click edit on list, toast will show.

3 Likes
6

Thanks for the hint! I did a try and i can use material widgets in my ionic application. Everything fine with buttons, list, etc. etc. But what about navigation for example? If i replace ion-nav-bar with md-toolbar i will loose the navigation capabilities (view title, back button). There is a workaround for that?

7

I would love to know this as well! It would be great if we could just specify a material design skin on the existing ionic components. The one i am specifically interested in is ion-tabs. The ion-tabs functionality (with separate histories per tab) is way better than md-tabs. But i would just like my ion-tabs to have the same “droplet” affect when clicked as the md-tabs do (as seen at https://material.angularjs.org/#/demo/material.components.tabs).

Is that possible?

8

hi,
check this codepan and add the file like i did ;

see this topic

1 Like
9

yes but what about adding the material look and droplet effects to ionic navigation components?

10

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
11

@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
12

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.

13

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:

14

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.

15

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

16

Also - ng-tabs seems to need this.

1 Like
17

Really Really really appreciate this quickfix <3

Thank you very much @mikkokam

18

any updates on this? thanks!

19

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

20

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.