Detect Screen Orientation in an Ionic 3 in IOS App

There are many situations while developing mobile apps when you need to get the orientation of the device. For example, you need to show another layout in landscape mode or even lock the device orientation. If you’ve been keeping up with making apps using Ionic, you should know the Cordova Orientation Plugin.

To understand how to use orientation plugin, let’s create a real Ionic 3 example.

Getting started

To follow this tutorial you should have the basic fundamentals of the command line and Ionic.
All the following was done using Ionic v.3.19.1 and Ionic DevApp.

1. Create a New Ionic 3 Application

Let’s create an Ionic example using the following command:

Go to your newly created project:

2. Install the Orientation plugin

To make manipulations with orientation in our example, we’re going to make use of the Apache Cordova plugin. It can be installed by executing the following commands:

After installation, we should set up this plugin into our app.

Our src/app.module.ts should look like this:

3. Configure

Let’s start with getting the current orientation and showing it on default-generated.HomePage We just need to integrate Screen-Orientation plugin to HomePage and into a constructor.

Remember, that Screen-Orientation plugin is using native device functionality, so we need to be sure this platform is ready.

Our src/pages/home/home.ts should look like this:

Our src/pages/home/home.html should look like this:

I tested this example directly on my iPhone using Ionic DevApp. I launched app using the ionic serve -c ommand terminal and opened it in Ionic DevApp. If all is ok, you should see the next:

Portrait-primary orientation


After rotating phone the text will not changes because we not observing the value of the orientation. To listen to the changes, we should change  src/pages/home/home.html in a next way:

After updating this code, you can rotate your phone and see the next:

After rotating upside down


After rotating the phone to the left

Also, you can keep one orientation for all app or just one page. For example, let’s set only the landscape mode for HomePage. It means HomePage can be in landscape-primary and landscape-secondary modes. We can do it with the single line:

Edit src/pages/home/home.ts to reflect the following:



As you can see, you can lock orientation or set specific orientation not only for the whole app but for a specific page. Also, you can configure orientation for your whole app in the Xcode.

If you have any questions, advice, feel free to leave them in the comments!

If you liked this, please help spread the word by hitting the recommend button below. Thanks!