Ionic 5 Screen Orientation Tutorial: Control, Lock, Unlock Landscape/Portrait Screen Orientation of Ionic Application
Ionic 5 Angular Screen Orientation to Landscape or Portrait topic is going to be discussed in this tutorial.
You are about to learn how to adjust or restrict the screen orientation of an Ionic application to Portrait, Landscape mode deliberately with Ionic Native and Cordova packages.
Locking or Unlocking the screen orientation to either Portrait or Landscape mode is facile in the Ionic environment; in some cases, you require to set the application orientation to a specific layout.
With the help of Ionic Native and Cordova plugin, setting up screen orientation becomes a child’s play; we just need to access a few methods, and its done.
Let me give you a brief overview of this Ionic 5 Screen orientation tutorial; you will learn to create an Ionic environment from scratch, import, and register screen orientation packages. Also, understand how to propel our logic to create the functionality to control an Ionic application’s screen orientation.
Getting Started with Ionic
First, Install fundamental command-line-interface tool (CLI) globally for evoking the Ionic app development.
npm install -g @ionic/cli
Check out the ionic version:
ionic --version
Install a new Ionic Angular blank project using Ionic CLI:
ionic start ionic-screen-orientation-example blank --type=angular
Move to project root:
ionic-screen-orientation-example
Install & Configure Ionic Native and Cordova Screen Orientation Package
Ionic project has been set up, now install Ionic Native and Cordova Screen Orientation plugin using below command.
This plugin helps to set or lock/unlock the screen orientation in a more subtle way.
ionic cordova plugin add cordova-plugin-screen-orientation
npm install @ionic-native/screen-orientation
Next, import the ScreenOrientation service from from ‘@ionic-native/screen-orientation/ngx’ in the app.module.ts, and don’t forget to register the ScreenOrientation class in providers array.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
ScreenOrientation
],
bootstrap: [AppComponent]
})
export class AppModule {}
Ascertain Current Screen Orientation
The ScreenOrientation offers multiple methods consequently import and inject ScreenOrientation package in home.page.ts file.
Import ScreenOrientation class and inject in the constructor()
method.
import { Component } from '@angular/core';
import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
existingScreenOrientation: string;
constructor(private so: ScreenOrientation) {
// get current orientation
this.existingScreenOrientation = this.so.type;
// find out changes in orientation
this.so.onChange().subscribe(
() => {
alert("Orientation updated" + this.so.type);
this.existingScreenOrientation = this.so.type;
}
);
}
}
Lock Screen Orientation (Landscape & Portrait)
You can easily set the screen orientation to portrait or landscape using the lock() method.
// Lock to portrait
lockToPortrait(){
this.so.lock(this.so.ORIENTATIONS.PORTRAIT);
}
// Lock to landscape
lockToLandscape(){
this.so.lock(this.so.ORIENTATIONS.LANDSCAPE);
}
Unlocking the Screen Orientation
Unlocking screen orientation is easy through the unlock()
method.
// Unlock screen orientation
unlockScreenOrientation(){
this.so.unlock();
}
Let us conjugate all the logic in the home.page.ts file.
import { Component } from '@angular/core';
import { ScreenOrientation } from '@ionic-native/screen-orientation/ngx';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
existingScreenOrientation: string;
constructor(private so: ScreenOrientation) {
// get current orientation
this.existingScreenOrientation = this.so.type;
// find out changes in orientation
this.so.onChange().subscribe(
() => {
alert("Orientation updated" + this.so.type);
this.existingScreenOrientation = this.so.type;
}
);
}
// Lock to portrait
lockToPortrait(){
this.so.lock(this.so.ORIENTATIONS.PORTRAIT);
}
// Lock to landscape
lockToLandscape(){
this.so.lock(this.so.ORIENTATIONS.LANDSCAPE);
}
// Unlock screen orientation
unlockScreenOrientation(){
this.so.unlock();
}
}
Open home.page.html file and place the below code.
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Ionic 5 Screen Orientation Demo
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
Existing Screen Orientation: <strong>{{this.existingScreenOrientation}}</strong>
<ion-button (click)="lockToPortrait()">
Set to Portrait Mode
</ion-button>
<ion-button (click)="lockToLandscape()">
Set to Landscape Mode
</ion-button>
<ion-button (click)="unlockScreenOrientation()"> Unlock </ion-button>
</ion-content>
Test Ionic Application
Use either of the command to add the preferred platform.
# iOS
ionic cordova platform add ios
# Android
ionic cordova platform add android
# Windows
ionic cordova platform add windows
Next, run the command to test the app in a real device; regardless of this you can debug the app in the Chrome browser too. Connect your device to the computer through USB and run the below command.
# iOS
ionic cordova run ios -l
# Android
ionic cordova run android -l
# Windows
ionic cordova run windows -l
Summary
This was it; we have seen the facile methods to set the screen orientation of Ionic application with Ionic Native and Cordova plugins. We tried to spice up this tutorial with some commonly asked features such as a set, lock, or unlock the screen orientation to landscape or portrait. Nonetheless, this feature is required less, but it will help us.