Ionic 4 Change UI Based on OS and Screen’s Orientation

 It is important for your user interface to adapt to which platform it’s currently serving. Ionic already do this for you but until for some extent. For example, if you want the floating action button to only appear on Android devices, you need to do it by yourself.

First, import Platform from the ionic/angular library.

import { Platform } from '@ionic/angular';

Then, inject it into the constructor.

public platform: any;

constructor(private _platform: Platform) {

this.platform = _platform;

}

Detect Screen’s Orientation

To detect screen’s orientation, inside your html file, use *ngIf to make the html tag to hide/appear depending on the screen’s orientation. The example below make the update the ion-label based on the screen’s orientation.

//Only display when screen in portrait mode

<ion-label *ngIf="platform.isPortrait()">Portrait</ion-label>

//Only display when screen in landscape mode

<ion-label *ngIf="platform.isLandscape()">Landscape</ion-label>

Detect Platform’s OS

To detect the platform Ionic currently serving, inside your html file, use *ngIf to make the html tag to hide/appear depending on the OS whether it is Android or iOS. The example below make the update the ion-label based on the device’s OS.

//Only display when running on iOS

<ion-label *ngIf="platform.is('ios')">iOS</ion-label>

//Only display when runnig on Android

<ion-label *ngIf="platform.is('android')">Android</ion-label>

That’s it for this tutorial, see you guys next time.