Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

Device Orientation

Improve this doc

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



  1. Install the Cordova and Ionic Native plugins:
    $ ionic cordova plugin add cordova-plugin-device-orientation
    $ npm install --save @ionic-native/device-orientation@4
  2. Add this plugin to your app's module

Supported platforms


// DeviceOrientationCompassHeading is an interface for compass
import { DeviceOrientation, DeviceOrientationCompassHeading } from '@ionic-native/device-orientation';

constructor(private deviceOrientation: DeviceOrientation) { }


// Get the device current compass heading
  (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

Instance Members


Get the current compass heading.

Returns: Promise<DeviceOrientationCompassHeading>


Get the device current heading at a regular interval

Stop the watch by unsubscribing from the observable

Param Type Details
options DeviceOrientationCompassOptions

Options for compass. Frequency and Filter. OptionalOptional

Returns: Observable<DeviceOrientationCompassHeading> Returns an observable that contains the compass heading


Param Type Details
frequency number

How often to retrieve the compass heading in milliseconds. (Number) (Default: 100)

filter number

The change in degrees required to initiate a watchHeading success callback. When this value is set, frequency is ignored. (Number)



Param Type Details
magneticHeading number

The heading in degrees from 0-359.99 at a single moment in time. (Number)

trueHeading number

The heading relative to the geographic North Pole in degrees 0-359.99 at a single moment in time. A negative value indicates that the true heading can't be determined. (Number)

headingAccuracy number

The deviation in degrees between the reported heading and the true heading. (Number)

timestamp number

The time at which this heading was determined. (DOMTimeStamp)