Possible to change layout for phone and tablets using Ionic 2?

Question

I see that there is a responsive grid system for Ionic 2, but that appears to just let you create a grid style layout.

I'm looking for something that will allow me to display the view one way on a tablet, and another on a phone. In this specific instance, I have a list of jobs. If it's a tablet, I want to also show a map to the right of the list and plot them out. How to make the map I understand, but how do I tell what they are using and show the correct UI?

Answer 1

You could decide how the layout is going to be shown by using the platform information:

Platform Name   Description
android on a device running Android.
cordova on a device running Cordova.
core    on a desktop device.
ios on a device running iOS.
ipad    on an iPad device.
iphone  on an iPhone device.
mobile  on a mobile device.
mobileweb   in a browser on a mobile device.
phablet on a phablet device.
tablet  on a tablet device.
windows on a device running Windows.

By using the underlying platform information you could show or hide things if its a tablet (or an ipad) by just simply doing:

this.isTabletOrIpad = this.platform.is('tablet') || this.platform.is('ipad');

And then by using *ngIf or whatever you need in your views, or using that isTabletOrIpad property to decide whether to initialize the map or not.