Hi
I was wondering if we’ve got anything that allows selective loading based on breakpoints in Ionic2?
I’ve got a request to only show a carousel for larger screens as it’s presentationally a nice-to-have, yet not essential to function.
I’m not opposed to writing a component to handle this via ngContent slots, but i havent found the way responsive-sm on the grid gets it’s knowledge of the breakpoint (i’m seriously hoping it’s from an observable).
I may not be understanding you properly, but…the responsive-sm on the grid get’s it’s knowledge of the breakpoint from the css breakpoint…
Can you elaborate? Do you just want a responsive css show/hide like Bootstrap provides? Or do you want actual JavaScript that detects the screen size?
Hey
I’m thinking actual JavaScript that detects the screen size and extends showWhen, to implement something such as:
<div show-when="sm">
<div show-when not="sm">
Oh, so, you’re in Ionic 2. responsive-sm is a lot different from showWhen.
You could fairly easily write your own using Platform, depending how in depth you need this: https://ionicframework.com/docs/v2/api/platform/Platform/#is
You can simply check if it’s a tablet then toss that in an ngIf.
Yeah I wasnt sure if responsive-sm was a directive that was observing the screen size and matching it to a breakpoint something.
But yeah that’s exactly what i was looking for!!
Okay cool. As far as I know, responsive-sm is just a css class. Unless there’s a directive for it out there that I haven’t seen. In fact I thought it was an Ionic 1 only css class. Let me know if I’m not following something there, but otherwise I think this is your best bet.
I’ve just realised, in Ionic 2 it must be a directive:
<ion-row responsive-sm>Oh…hmmm, I’ve never seen that, do you know where the docs are for that?
I dont think it’s in the docs, only found it through type completion and knowledge of Ionic 1
hmmm, ya that’s very strange. Explains why I didn’t know about it though. I wonder what’s that about.