Detect Screen Orientation in ionic2/Angular2

Hi,

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

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

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

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

Regards

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

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

You can use the angular 2 binding within your template

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

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

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.

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

How did you do that change?

The change to the typings file? Go to

node_modules\ionic-native\dist\es5\plugins\screen-orientation.d.ts

and change:

static orientation: string;

to:

static orientation: any;
1 Like

Hi dwhite97,
I have changed static orientation: string; to ‘any’ but still it is undefined only

Have you installed and saved the plugin?

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

If not, I’m not sure.

Hi,
yaaa i have installed

Hi,
Here is my code.can you please check

import { ScreenOrientation } from ‘ionic-native’;
@Component({
templateUrl: ‘app.html’
})
export class IES {
constructor(public platform: Platform){}
window.addEventListener(“orientationchange”, function(){
console.log(‘New screen orientation:’, ScreenOrientation.orientation.type)

});
}

If you’re using the cordova plugin and since you’re making mobile apps, and cordova is the bridge needed to use phone’s hardware, you can’t test this on any browser. Try deploying on a real device or an emulator. Check this: Ionic 2 | Deploying

Funnily enough, I was able to test this on a browser (Chrome). Despite using the Cordova plugin.

I have no idea why, unfortunately.

Hi,

I managed to get this with the following:

import { AfterContentChecked, OnDestroy, ChangeDetectorRef } from '@angular/core';

class Page implements AfterContentChecked, OnDestroy {

  isPortrait: boolean;
  timeouts: number[];

  ...

  ngAfterContentChecked(): void {
    if (window.matchMedia("(orientation: portrait)").matches) {
      this.isPortrait = true;
    } else {
      this.isPortrait = false;
    }
    // forcing Angular to detect the changes
    this.timeouts.push(setTimeout(() => this.changeDetectorRef.detectChanges(), 100));  
  }

  ngOnDestroy() {
    this.timeouts.forEach( (val) => clearTimeout(val) );
  }
}

An isPortrait can then be used in your templates.

I’m not sure how long this has been in Ionic, but I found hidewhen/showwhen attribute when reviewing the API docs https://ionicframework.com/docs/api/components/show-hide-when/HideWhen/
https://ionicframework.com/docs/api/components/show-hide-when/ShowWhen/
That can be used for orientation as well as platform specific conditioning of markup. I hope it helps anyone else who Googles in on this topic in future too.

1 Like