Platform Tools

Provides Ionic Framework way class mapping of current platform and orientation on the root document node ´html´ for usage inside scss or :host-context selecting.

Usage

Simply inject the service in your root app component and it will add classes to your document.

import {PlatformToolsService} from "./platform-tools.service";

export class AppComponent {
  public constructor(
      // ... 
    private readonly platformService: PlatformToolsService
      // ... 
  ) {

  }
}

Now you're able to use :host-context(.plt-tablet) at Angular Component SCSS level for writing context based css, or use at global.scss/style.scss as selector .plt-tablet > app-component { ... }.

Available class selectors:

| Selector Name | Description | |---------------|------------------------------------------| | plt-android | a device running Android | | plt-desktop | a desktop device | | plt-ios | a device running iOS | | plt-ipad | an iPad device | | plt-iphone | an iPhone device | | plt-mobile | a mobile device | | plt-mobileweb | a web browser running in a mobile device | | plt-phablet | a phablet device | | plt-pwa | a PWA app | | plt-tablet | a tablet device | | is-landscape | a device with landscape orientation | | is-portrait | a device with portrait orientation |

Example

Inside your Angular Component Stylesheet SCSS

:host {
  display: block;
  width: 100%;
  height: 100vh;
}

// set color of font to white on ios platform
:host-context(.plt-ios) {
  :host {
    color: white;
  }
}
// set background color to blue on tablet
:host-context(.plt-tablet) {
  :host {
    background-color: blue;
  }
  
  // set background color red if tablet and landscape
  :host-context(.is-landscape) {
    :host {
      background-color: red;
    }
  }
}

Or inside your style.scss / global.scss without :host-context since it is only available inside component scss scopes.

html.plt-ios {
 // ... your rules
}

// or
.plt-tablet{

}

Notes

Platform class mapping won't change if simply changing device emulator inside Chrome since platform evaluation is done only on boot. A Reload will be needed. Screen orientation will be update on screenorientation change by listening to the window resize event.

Author

• Sven Graziani

Credits

To the Ionic Framework core team for the inspiration.