Ionic 5 Screen Orientation Tutorial: Control, Lock, Unlock Landscape/Portrait Screen Orientation of Ionic Application

Last updated on November 7, 2020 by Digamber

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/Angular 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 5/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.