Is there a tutorial for using Ionic and Angular Material?

tutorials
#21

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

1 Like
#22

@smkhalsa how is it performance-wise?

#23

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

#24

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
#25

Use the official angular material site

#26

Hi ,

check this site :smile:

http://ionicmaterial.com/

thx to @zachfitz and all contributions

1 Like
#27

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

#28

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

start reading the code :smile:

#30

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

#31

Iā€™ve created a simple repo demonstrating Angular Material integration in ionic. It is an implementation of the ionic ā€˜tabsā€™ starter project using Angular Material. Please let me know if you have any feedback.

#32

@hermeh : Demo seems fine, did you tried navigation (specially back button) with it ?

#33

I have used ionic material and I am using Angular-material on a web app. I would recommend sticking to IONIC and using their directives. BUT download the angular material sass and use it to override the IONIC styles so you can still get the look and feel.

#34

Hi everyone.

I just builded using the lat ionic. and didnā€™t work

A nice project is http://ionicmaterial.com, works and its beauty but, I have to fix many errors and it did not have a lot of MD features.
Also the author never respondā€¦

With Angular material. My App who do/look like I want. but, after build. Somehow fails.

What works

  1. Tabs
  2. ngClicks partially
  3. clock effect works uggly

But not (mainly css)

  1. backgrounds colors
  2. swipe motions effects
  3. scroll
  4. Almost all other css
#35

Hi guys, until now my experience with the use of both frameworks is ok!

Iā€™m working with the versions 0.11.2 for the Angular Material, and v1.1.0-nightly-1583 for the Ionic.

The first thing I noticed that was not working is the ripple effect for the Material components (md-buttons). I noticed that the <div class="md-ripple-container"></div> responsible for the effect was not been created after the tap, so I applied the data-tap-disabled="true" attribute and the <div class="md-ripple-container"></div> was created. Fine!

But still nothing about the effect :pensive:

So I made some CSS fix and, BAZINGA! :stuck_out_tongue_closed_eyes: :raised_hands:
here the CSS code:

.md-button .md-ripple-container{overflow:inherit !important;border-radius: 0;}

the Tabs component from the Angular Material works, but with no ripple. To make the ripple effect works you need to add the data-tap-disabled="true" attribute in the md-tab-item tag. For this, I added manually the attribute to the angular-material.js file. Search for the "<md-tab-item" in the code and add the data-tap-disabled="true" in the declaration syntax. The ripple effect now works! :blush:

Iā€™m using Angular Material for some components, and its works fine now.
I hope this helpsā€¦ :+1:

3 Likes
#36

I ve spent most of the day trying to make this work and it drove me crazy !!
In my case (ngmaterial 1.0.0rc) if i add data-tap-disabled=ā€œtrueā€ solves the ripple problem but i can`t scroll the pageā€¦

Is there anyway to make this work as it should ???

1 Like
#37

Checkout http://blog.preterk.com/2017/11/02/adding-googles-angular-material-ionic-3/

#38

I am facing the same issue in ionic 1.3.3. Have you solved this? Please let me know how to get around this if you did.

#39

Check out this video - explains it well!

#40

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.