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:

1

ionic start orientation-example blank

Go to your newly created project:

1

cd./orientation-example

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:

1

2

$ionic cordova plugin add cordova-plugin-screen-orientation

$npm install--save@ionic-native/screen-orientation

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

import{BrowserModule}from'@angular/platform-browser';

import{ErrorHandler,NgModule}from'@angular/core';

import{IonicApp,IonicErrorHandler,IonicModule}from'ionic-angular';

import{SplashScreen}from'@ionic-native/splash-screen';

import{StatusBar}from'@ionic-native/status-bar';

import{ScreenOrientation}from'@ionic-native/screen-orientation';

import{MyApp}from'./app.component';

import{HomePage}from'../pages/home/home';

@NgModule({

declarations:[

MyApp,

HomePage

],

imports:[

BrowserModule,

IonicModule.forRoot(MyApp)

],

bootstrap:[IonicApp],

entryComponents:[

MyApp,

HomePage

],

providers:[

StatusBar,

SplashScreen,

ScreenOrientation,

{provide:ErrorHandler,useClass:IonicErrorHandler}

]

})

exportclassAppModule{}

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:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

import{Component}from'@angular/core';

import{NavController}from'ionic-angular';

import{Platform}from'ionic-angular';

import{ScreenOrientation}from'@ionic-native/screen-orientation';

@Component({

selector:'page-home',

templateUrl:'home.html'

})

exportclassHomePage{

orientation:string;

constructor(platform:Platform,

public navCtrl:NavController,

private screenOrientation:ScreenOrientation){

platform.ready().then(()=>{

this.orientation=this.screenOrientation.type;

}).catch(err=>{

console.log('Error while loading platform',err);

});

}

}

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

1

2

3

4

5

6

7

8

9

10

11

12

<ion-header>

<ion-navbar>

<ion-title>

Ionic Orientation Example

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<p>Orientation:</p>

<p>{{orientation}}</p>

</ion-content>

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:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

import{Component}from'@angular/core';

import{NavController}from'ionic-angular';

import{Platform}from'ionic-angular';

import{ScreenOrientation}from'@ionic-native/screen-orientation';

@Component({

selector:'page-home',

templateUrl:'home.html'

})

exportclassHomePage{

orientation:string;

constructor(platform:Platform,

public navCtrl:NavController,

private screenOrientation:ScreenOrientation){

platform.ready().then(()=>{

this.orientation=this.screenOrientation.type;

this.screenOrientation.onChange().subscribe(

()=>{

this.orientation=this.screenOrientation.type;

}

);

}).catch(err=>{

console.log('Error while loading platform',err);

});

}

}

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: