Ionic 6 Adjust Screen Orientation to Landscape/Portrait and Lock/Unlock

Ionic screen orientation setting up tutorial; In this extensive yet simple tutorial, you will learn how to set screen orientation in Ionic Angular application to Landscape, Portrait.

Not only but also how to lock screen orientation using Cordova and Ionic native screen orientation plugin.

We will explain bit by bit how to control screen orientation in an Ionic app. Theoretically, verily we require to show fewer applications in specific screen orientation.

It may be Landscape or Portrait; to do that you have to lock or unlock the screen orientation.

Hence to achieve this functionality, we are going to use the screen orientation plugin through the Cordova and Ionic native library.

Ionic 6 Screen Orientation Example

  • Step 1: Setting Up Ionic Angular App
  • Step 2: Install Screen Orientation Plugin
  • Step 3: Register ScreenOrientation in App Module
  • Step 4: Find Out Current Screen Orientation
  • Step 5: Lock Screen Orientation to Landscape or Portrait
  • Step 6: How to Unlock Screen Orientation
  • Step 7: Implement Screen Orientation
  • Step 8: Final Code

Setting Up Ionic Angular App

Type npm command and execute it to install the ionic cli tool:

npm install -g @ionic/cli

Again type command to create a fresh Ionic Angular application:

ionic start ionic-demo blank --type=angular

Get into the application:

ionic-ionic-demo

Remove Type Errors

You have to remove strict type errors make sure to set “strictTemplates”: false in angularCompilerOptions in tsconfig.json file.

Install Screen Orientation Plugin

We assume you have landed inside the project folder now; in this step, you need to run the recommended commands to install Cordova and Ionic native screen orientation plugin.

ionic cordova plugin add cordova-plugin-screen-orientation

npm install @ionic-native/screen-orientation

Register ScreenOrientation in App Module

Subsequently, head over to the app.module.ts file, import, and register the ScreenOrientation module inside the main AppModule class.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
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: [
    ScreenOrientation,
    { 
      provide: RouteReuseStrategy, 
      useClass: IonicRouteStrategy 
    }
  ],
  bootstrap: [AppComponent],
})

export class AppModule {}

How to Find Out Current Screen Orientation

Start with importing the ScreenOrientation module, don’t forget to inject it into the constructor method. Now, you can access the type method, which helps you get or find out the current screen orientation.

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 {

  activeScreenOrt: string;

  constructor(private screenOrientation: ScreenOrientation) {
    
    // Find screen current orientation
    this.activeScreenOrt = this.screenOrientation.type; 
    
    this.screenOrientation.onChange().subscribe(
      () => {
        alert("Orientation changed" + this.screenOrientation.type);
        this.activeScreenOrt = this.screenOrientation.type;
      }
    );    
  }

}

Ionic Lock Screen Orientation to Landscape or Portrait

Using the ionic native and Cordova plugin, we can access the PORTRAIT and LANDSCAPE methods to lock the screen.

  // Lock to Portrait & Landscape
  lockScreenOrientationPortrait(){
    this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT);
  }

  lockScreenOrientationLandscape(){
    this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE);
  }

How to Unlock Screen Orientation

Similarly, we can access the unlock method to unlock the screen orientation in Ionic.

  // Screen orientation unlock 
  unlockSo(){
    this.screenOrientation.unlock();
  }

Implement Screen Orientation in Home (Final Code)

Let us combine all the methods and functions to give you the final code of this tutorial.

Open home.page.html file, and add with the following code:

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Blank
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <div id="container">
    Current Screen Orientation: <strong>{{this.activeScreenOrt}}</strong>

    <ion-button (click)="lockScreenOrientationPortrait()">
      Adjust to Portrait Mode
    </ion-button>
  
    <ion-button (click)="lockScreenOrientationLandscape()">
      Adjust to Landscape Mode
    </ion-button>
  
    <ion-button (click)="unlockSo()">Unlock Screen Orientation</ion-button>
  </div>
</ion-content>

Open home.page.ts file, and update with the given below code:

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 {

  activeScreenOrt: string;

  constructor(private screenOrientation: ScreenOrientation) {
    
    // Find screen current orientation
    this.activeScreenOrt = this.screenOrientation.type; 
    
    this.screenOrientation.onChange().subscribe(
      () => {
        alert("Orientation changed" + this.screenOrientation.type);
        this.activeScreenOrt = this.screenOrientation.type;
      }
    );    
  }

  // Lock to Portrait & Landscape
  lockScreenOrientationPortrait(){
    this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.PORTRAIT);
  }

  lockScreenOrientationLandscape(){
    this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE);
  }

  // Screen orientation unlock 
  unlockSo(){
    this.screenOrientation.unlock();
  }

}

Conclusion

Now, you have understood how to lock screen orientation, how to set landscape and portrait screen orientation in an Ionic app.

You can run this demo on a mobile device to test the feature.