Ionic 4 | Set Screen Orientation in LANDSCAPE/ PORTRAIT and Lock/ Unlock using Ionic Native Plugin

In an Ionic application, we can easily force orient screen into Landscape or Portrait mode. In some situations developers need to show UI of application in a specific layout, this plugin can help to lock/ unlock screen orientation by calling a simple method.

Here we will create a new Ionic 4 application and Install Ionic’s Screen Orientation Plugin with Cordova wrapper to access hardware features.

Let’s start

First, make sure you have the latest version of Ionic CLI installed by running following NPM command.

Next, we will create a new Ionic application with a blank template.

Install Cordova and Native Screen Orientation Plugin

After creating and moving to app folder in CLI we will install Cordova and Ionic native plugin to work in the application.

Run following CLI commands to install the Cordova and Ionic native plugin.

Import Plugin in App’s Module

After successful installation of Cordova and Native plugin, open app.module.ts file then import and add the plugin in the providers array

Use Screen Orientation Plugin in Home Component

To use the plugin we will import it then add in the constructor of component.

To get the current Orientation of Screen, use type

To Set Orientation in Landscape or Portrait call lock method as shown below

Similarly, we can Unlock the locked orientation by calling unlock() method to enable users to apply their own orientation.

After combining all methods above our homa.page.ts file will look like this

To call these methods to change the home.page.html file with the following code.

That’s it this plugin provides most of the plugins required to handle screen orientation in IOS, Android and Windows.

 

 

Leave a Reply

avatar
  Subscribe  
Notify of