Detect Screen Orientation in ionic2/Angular2

Ionic Framework ionic-v3
1

Hi There,

Is there a way to detect the screen orientation in ionic2/Angular2?

Please help. I can see the codes for ionic1 but not ionic2.

Thanks

2 Likes
2

You can use the API - http://ionicframework.com/docs/v2/api/platform/Platform/

…platform.isPortrait() or platform.isLandscape() returns either true or false

1 Like
3

Thanks, I will check. But if he changes the orientation then do we have any event where i can use this functions?

i mean currently I am in portrait, so I can get that orientation using function, but if he changes to landscape then in which event i need to bind?

Thanks,

1 Like
4

I would probably use in this case the Cordova plugin to detect the orientation change - here’s the Ionic2 API: http://ionicframework.com/docs/v2/native/device-orientation/

5

Or try just this one on your initializeApp()

window.addEventListener("orientationchange", function() {
    alert(window.orientation);
}, false);
6

Actually I have tried with this putting in initializeApp but due to conflict of typescript and Cordova, ionic cli was not able to build in android.

Will try and check device orientation.

7

Device Orientation is for compass. The second method is valid (addEventListener…)

Regards.

8

Hi,

I have coded like this way in my ionic2 project where i have taken orientation as class property.

orientation:any;
constructor() {
this.orientation = window.orientation;
}

initializeApp() {
window.addEventListener(“orientationchange”, function() {
this.orientation = window.orientation;
}, false);
}

But while changing the mobile orientation, it still shows 0. Any idea?

Thanks

9

You can define variable on public context, for example screenOrientation;

public screenOrientation: any,
constructor(){
// do nothing
}

 changeOrientation() {
        switch (window.orientation) {
            case 0:
                this.screenOrientation = 'portrait';
                break;
            case 90:
                this.screenOrientation = 'landscape';
                break;
            case 180:
                this.screenOrientation = 'portrait';
                break;
            case -90:
                this.screenOrientation = 'landscape';
                break;
            default:
                this.screenOrientation = 'unknown';
        }
    }

ngOnInit() {
window.onorientationchange = function() {
setTimeout(() => {
this.changeOrientation();
}, 300);
}
}

And using ngOnInit you can set event for onOrientationChange.

And you can access to this.screenOrientation, I use timeout because in some strange cases var is not updated at time.

The code it’s not tested, if you have any question, please don’t hesitate to contact with me.

Regards!

1 Like
10

Hi,

No Luck. ngOnInit doesn’t detect the orientation. Any other thought please?

11

Just curious, why do you need to detect screen orientation?

12

I want to give different widths to the columns as per orientation.

13

Work for me! I’m using in Ionic beta 9.

Regards

14

i was thinking that too,guess we can use something like this.Right?

15

I’m having the same issue. I need to provide one of two different layouts on a few screens depending on if the device is in landscape or portrait mode. I’m successfully using platform.isPortrait() and platform.isLandscape() on load, however when checking again with the orientationchange event listener, they are reporting the same (original) orientation even though the device’s orientation has changed. :confused:

1 Like
16

You can use the angular 2 binding within your template

(window:orientationchange)="changeOrientation($event)"
3 Likes
17

Hi nikini,
How to know the mode(potrait or landscape) of window by using above method.

18

platform.isPortrait() and platform.isLandscape() seemed to have a few issues, so I used the Ionic Native Screen Orientation plugin:

window.addEventListener("orientationchange", () => {
    console.log('New screen orientation:', ScreenOrientation.orientation.type);
});

If you do go down this route, you have to alter the typings of the plugin so that Typescript recognises that

ScreenOrientation.orientation

returns an object rather than a string. Hope this helps.

19

Hi,
If I use the above code it is returning undefined.and WARNING:Native: tried accessing the ScreenOrientation plugin but Cordova is not available. Make sure to include cordova.js or run in a device/simulator.
How to fix that issue.please help me

20

How did you do that change?