Skip to main content

Screen Orientation

EOL Notice

Screen Orientation will reach its end-of-life on July 1, 2024, and will no longer receive updates or support. Please see Support Policy for additional information.

The Screen Orientation plugin provides the ability to set or lock the screen orientation (landscape or portrait), as well as detect when the orientation has changed.

Installation

If you have not already setup Ionic Enterprise in your app, follow the one-time setup steps.

Next, install the plugin:

npm install @ionic-enterprise/screen-orientation
npx cap sync

Index

Classes


Classes

ScreenOrientation

usage:

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

constructor(private screenOrientation: ScreenOrientation) { }

...

// get current
console.log(this.screenOrientation.type); // logs the current orientation, example: 'landscape'

// set to landscape
this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE);

// allow user rotate
this.screenOrientation.unlock();

// detect orientation changes
this.screenOrientation.onChange().subscribe(
() => {
console.log("Orientation Changed");
}
);

advanced: Accepted orientation values:

Value

Description

portrait-primary

The orientation is in the primary portrait mode.

portrait-secondary

The orientation is in the secondary portrait mode.

landscape-primary

The orientation is in the primary landscape mode.

landscape-secondary

The orientation is in the secondary landscape mode.

portrait

The orientation is either portrait-primary or portrait-secondary (sensor).

landscape

The orientation is either landscape-primary or landscape-secondary (sensor).

ORIENTATIONS

● ORIENTATIONS: object

Convenience enum for possible orientations

Type declaration

ANY: string

LANDSCAPE: string

LANDSCAPE_PRIMARY: string

LANDSCAPE_SECONDARY: string

PORTRAIT: string

PORTRAIT_PRIMARY: string

PORTRAIT_SECONDARY: string


type

● type: string

Get the current orientation of the device.


lock

lock(orientation: string): Promise<any>

Lock the orientation to the passed value. See below for accepted values

Parameters:

NameTypeDescription
orientationstringThe orientation which should be locked. Accepted values see table above.

Returns: Promise<any>


onChange

onChange(): Observable<void>

Listen to orientation change event

Returns: Observable<void>


unlock

unlock(): void

Unlock and allow all orientations.

Returns: void