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

`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

`getQueryParam()`

Get the query string parameter

`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.

`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.

`isLandscape()`

Returns true if the app is in landscape mode.

`isPortrait()`

Returns true if the app is in portait mode.

`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

`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.

`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

`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

`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.

`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.

`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`

`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`

`testUserAgent()`

`url()`

Get the current url.

`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.

`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.

Sass Variables

All iOS Material Design Windows Platform

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