Questions: Ionic, Material and Polymer. Confusion?

Hi @mhartington unfortunately, it doesn’t work perfect on my phone(Android 4.4.4) or emulator. I added the directive, CSS and attribute and it should work? I get ***only a grey ellipse appearing and it doesn’t get faded out(stays there)***. There is some bug.

Webview do not support those animations used in material designs. So, to use it you need to use Crosswalk which is using Chromeview.

@ozexpert I build using crosswalk still ripple doesn’t work on a real device. Did you get it working ?

The ripple effect works beautifully for me. I run it on crosswalk

Hi @siddhartha ,

I included the Directive, CSS styling and Attribute. Not sure about what’s wrong. I’d assume I’m doing something wrong with the build as process it works fine when I test on Desktop Browser side.I’m using crosswalk build on Intel xdk.

CHeck console. Have you included ngMaterial as a dependency? Cross check something minor problem I guess.

Okay. I was trying the ripple effect on the codepen from @mhartington. There is no ngMaterial used there. I shall try using ngMaterial on Ionic to get Ripple :wink:

What browser are you using? I can see the ripple effect on @mhartington’s codepen

Hi, not sure if you have understood me correct. To clarify, I get Ripple on Desktop browsers (chrome unstable version) but not on real Android 4.4.4 device for crosswalk .apk

Yeah, it seems that the directive is problematic on mobile devices once compiled. Maybe using crosswalk will help, but a probable rewrite of the directive couldn’t hurt.

@mhartington — Mike, why is hammer.js a requirement? Doesn"t ionic already takes a care of touch events?

Am trying to build an app(Employee effort tracking system) using ionicframework need an helping hand pls. Thank you.

@bonatoque Ionic does include hammer.js built in but its setup for private methods.

Note, that material just removed hammer.js as a requirement

1 Like

@mhartington Does that mean to include ngMaterial on Ionic Project doesn’t require “hammer.js” to get it working?

After some rough tests (copy-pasting angular-material components directly into the ionic “tabs” starter templates to see how they react), I must say that Ionic + angular-material are pure bliss.

It’s almost like we’re moving forward to a time when medium-skilled angular devs are going to simply develop instead of losing time (and the designers time) prototyping.

Once you get a grasp on ng-animate and ui-router, and play with CSS keyframes, it’s easy to replicate the eye-candy full interface transitions (growing navbars, etc) of the official material design videos. We’re still in need of a good ng module that would be fed with a list of the UI components, with separated, modular animations for each one of them, and triggered by context/state/route.

P.S. : Get Genymotion and use it instead of the Android SDK. Do yourself a favour.

I think it’s the case.

From what I understand, hammer.js is under the hood of ionic, so we’re talking about material design requiring hammer.js.

But like Mike posted, the latest angular-material now has its own mechanism. So yes, I think hammer.js reference can be commented. A/B test to be sure.

HI @bonatoque,

I included the latest ‘ng-material’ files on the Ionic Project and it doesn’t recognise touch inputs to navigate or so. Did you have a similar experience? And,also excluding ‘hammer.js’ doesn’t work .

I noticed something odd.

With the latest release, something breaks without even a console warning or error. The page stays blank.
When trying to install the latest angular-material frow the Ionic CLI, or directly through bower, it didn’t work for me. So for the moment, I keep hammer.js

What works for the moment is a manual installation of angular-material assets, at version 0.7.0

Ionic files are at version v1.0.0-beta.14.

Use Ionic View (if you have an iOS device) to check a pretty ugly but functional demo of it : the app’s id is 668a6d6b.

Maybe you should open a new thread, since the title and the subject here are too vague.
Without console errors, it’s hard to determine what does not work with the latest version.
Is it a problem with Ionic or angular-material ?

I’ll try some sandboxes with different versions to understand exactly at which version things break. In the meantime, it would be great to have a dedicated thread about this issue. Maybe also some issue posting on both githubs.

Angular Material seems to conflict with Ionic from 0.7.1 (the hammer js removal)

See also : https://github.com/angular/material/issues/892#issuecomment-66958616

and also https://github.com/angular/material/issues/1406

Will be included into Ionic?

If you have not checked, try this.

ionicmaterial.com

1 Like