Is there a tutorial for using Ionic and Angular Material?
Ionic & android material design
Will Google's Material Design/Polymer elements ever come to Ionic?
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.
There are no tutorial util now. However, you can make them work together from beta 14.
<!-- 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>
Have you an example?
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.
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?
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?
check this codepan and add the file like i did ;
see this topic
yes but what about adding the material look and droplet effects to ionic navigation components?
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?
- 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.
@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.
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
Questions: Ionic, Material and Polymer. Confusion?
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?
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:
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>
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.
Also - ng-tabs seems to need this.
any updates on this? thanks!
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
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.