Skip to main content

Device Orientation

Requires Cordova plugin: cordova-plugin-device-orientation. For more info, please see the Device Orientation docs.

https://github.com/apache/cordova-plugin-device-orientation

Stuck on a Cordova issue?

Don't waste precious time on plugin issues.

If you're building a serious project, you can't afford to spend hours troubleshooting. Ionic’s experts offer premium advisory services for both community plugins and premier plugins.

Installation#

$ npm install cordova-plugin-device-orientation
$ npm install @ionic-native/device-orientation
$ ionic cap sync

Supported Platforms#

  • Amazon Fire OS
  • Android
  • BlackBerry 10
  • Browser
  • Firefox OS
  • iOS
  • Tizen
  • Ubuntu
  • Windows
  • Windows Phone

Usage#

React#

Learn more about using Ionic Native components in React

Angular#

// DeviceOrientationCompassHeading is an interface for compass
import { DeviceOrientation, DeviceOrientationCompassHeading } from '@ionic-native/device-orientation/ngx';
constructor(private deviceOrientation: DeviceOrientation) { }
...
// Get the device current compass heading
this.deviceOrientation.getCurrentHeading().then(
(data: DeviceOrientationCompassHeading) => console.log(data),
(error: any) => console.log(error)
);
// Watch the device compass heading change
var subscription = this.deviceOrientation.watchHeading().subscribe(
(data: DeviceOrientationCompassHeading) => console.log(data)
);
// Stop watching heading change
subscription.unsubscribe();