TypeScript icon, indicating that this package has built-in type declarations

12.0.0 • Public • Published

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.


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


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



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.



To the Ionic Framework core team for the inspiration.

Package Sidebar


npm i @anexia/platform-tools

Weekly Downloads






Unpacked Size

48.8 kB

Total Files


Last publish


  • valentingavran
  • anx-aster
  • takl95
  • pkrumpl
  • crawl
  • grazianisven
  • anx-hnezbeda
  • anx-astocker