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

Platform

Improve this doc

The Platform service can be used to get information about your current device. You can get all of the platforms associated with the device using the platforms method, including whether the app is being viewed from a tablet, if it's on a mobile device or browser, and the exact platform (iOS, Android, etc). You can also get the orientation of the device, if it uses right-to-left language direction, and much much more. With this information you can completely customize your app to fit any device.

Usage

import { Platform } from 'ionic-angular';

@Component({...})
export MyPage {
  constructor(public plt: Platform) {

  }
}

Instance Members

is(platformName)

Depending on the platform the user is on, is(platformName) will return true or false. Note that the same app can return true for more than one platform name. For example, an app running from an iPad would return true for the platform names: mobile, ios, ipad, and tablet. Additionally, if the app was running from Cordova then cordova would be true, and if it was running from a web browser on the iPad then mobileweb would be true.

import { Platform } from 'ionic-angular';

@Component({...})
export MyPage {
  constructor(public plt: Platform) {
    if (this.plt.is('ios')) {
      // This will only print when on iOS
      console.log("I'm an iOS device!");
    }
  }
}
Platform Name Description
android on a device running Android.
cordova on a device running Cordova.
core on a desktop device.
ios on a device running iOS.
ipad on an iPad device.
iphone on an iPhone device.
mobile on a mobile device.
mobileweb in a browser on a mobile device.
phablet on a phablet device.
tablet on a tablet device.
windows on a device running Windows.
Param Type Details
platformName string
Returns: boolean

returns true/false based on platform.

platforms()

Depending on what device you are on, platforms can return multiple values. Each possible value is a hierarchy of platforms. For example, on an iPhone, it would return mobile, ios, and iphone.

import { Platform } from 'ionic-angular';

@Component({...})
export MyPage {
  constructor(public plt: Platform) {
    // This will print an array of the current platforms
    console.log(this.plt.platforms());
  }
}
Returns: array

the array of platforms

versions()

Returns an object containing version information about all of the platforms.

import { Platform } from 'ionic-angular';

@Component({...})
export MyPage {
  constructor(public plt: Platform) {
    // This will print an object containing
    // all of the platforms and their versions
    console.log(plt.versions());
  }
}
Returns: object

An object containing all of the platforms and their versions.

ready()

Returns a promise when the platform is ready and native functionality can be called. If the app is running from within a web browser, then the promise will resolve when the DOM is ready. When the app is running from an application engine such as Cordova, then the promise will resolve when Cordova triggers the deviceready event.

The resolved value is the readySource, which states which platform ready was used. For example, when Cordova is ready, the resolved ready source is cordova. The default ready source value will be dom. The readySource is useful if different logic should run depending on the platform the app is running from. For example, only Cordova can execute the status bar plugin, so the web should not run status bar plugin logic.

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';

@Component({...})
export MyApp {
  constructor(public plt: Platform) {
    this.plt.ready().then((readySource) => {
      console.log('Platform ready from', readySource);
      // Platform now ready, execute any required native code
    });
  }
}
Returns: promise

setDir(dir)

Set the app’s language direction, which will update the dir attribute on the app’s root <html> element. We recommend the app’s index.html file already has the correct dir attribute value set, such as <html dir="ltr"> or <html dir="rtl">. This method is useful if the direction needs to be dynamically changed per user/session. W3C: Structural markup and right-to-left text in HTML

Param Type Details
dir string

Examples: rtl, ltr

dir()

Returns app’s language direction. We recommend the app’s index.html file already has the correct dir attribute value set, such as <html dir="ltr"> or <html dir="rtl">. W3C: Structural markup and right-to-left text in HTML

Returns: string

isRTL()

Returns if this app is using right-to-left language direction or not. We recommend the app’s index.html file already has the correct dir attribute value set, such as <html dir="ltr"> or <html dir="rtl">. W3C: Structural markup and right-to-left text in HTML

Returns: boolean

setLang(language)

Set the app’s language and optionally the country code, which will update the lang attribute on the app’s root <html> element. We recommend the app’s index.html file already has the correct lang attribute value set, such as <html lang="en">. This method is useful if the language needs to be dynamically changed per user/session. W3C: Declaring language in HTML

Param Type Details
language string

Examples: en-US, en-GB, ar, de, zh, es-MX

lang()

Returns app’s language and optional country code. We recommend the app’s index.html file already has the correct lang attribute value set, such as <html lang="en">. W3C: Declaring language in HTML

Returns: string

pause

The pause event emits when the native platform puts the application into the background, typically when the user switches to a different application. This event would emit when a Cordova app is put into the background, however, it would not fire on a standard web browser.

resume

The resume event emits when the native platform pulls the application out from the background. This event would emit when a Cordova app comes out from the background, however, it would not fire on a standard web browser.

registerBackButtonAction(callback, priority)

The back button event is triggered when the user presses the native platform’s back button, also referred to as the “hardware” back button. This event is only used within Cordova apps running on Android and Windows platforms. This event is not fired on iOS since iOS doesn’t come with a hardware back button in the same sense an Android or Windows device does.

Registering a hardware back button action and setting a priority allows apps to control which action should be called when the hardware back button is pressed. This method decides which of the registered back button actions has the highest priority and should be called.

Param Type Details
callback Function

Called when the back button is pressed, if this registered action has the highest priority.

priority number

Set the priority for this action. Only the highest priority will execute. Defaults to 0.

Returns: Function

A function that, when called, will unregister the its back button action.

getQueryParam()

Get the query string parameter

url()

Get the current url.

width()

Gets the width of the platform’s viewport using window.innerWidth. Using this method is preferred since the dimension is a cached value, which reduces the chance of multiple and expensive DOM reads.

height()

Gets the height of the platform’s viewport using window.innerHeight. Using this method is preferred since the dimension is a cached value, which reduces the chance of multiple and expensive DOM reads.

isPortrait()

Returns true if the app is in portait mode.

isLandscape()

Returns true if the app is in landscape mode.

testUserAgent()

Sass Variables

Property Default Description
$cordova-statusbar-padding-modal-max-width 767px

The breakpoint when a modal becomes inset

Property Default Description
$cordova-ios-statusbar-padding 20px

Height of the Statusbar

$cordova-ios-statusbar-padding-modal-max-width $cordova-statusbar-padding-modal-max-width

The breakpoint when a modal becomes inset

Property Default Description
$cordova-md-statusbar-padding 20px

Height of the Statusbar

$cordova-md-statusbar-padding-modal-max-width $cordova-statusbar-padding-modal-max-width

The breakpoint when a modal becomes inset

Property Default Description
$cordova-wp-statusbar-padding 20px

Height of the Statusbar

$cordova-wp-statusbar-padding-modal-max-width $cordova-statusbar-padding-modal-max-width

The breakpoint when a modal becomes inset

API

Native

General