Ionic2 - Add global class to whole application page, depending on detected device name

Question

I am detecting a platform in my app.component.ts file, where I want to add a several different scss to the ion-header, ion-content, ion-title etc. tags in my whole app. I want to add a global prefix (depending on my device detected) to the whole app page, so:

<my-page class="ion-page show-page">

this one is generated by default for each ionic page. I want to be able to add additional class, so I can hierarchly modify all other required classes which are child to this one, so:

<my-page class="ion-page show-page **device-ios-iphonex**">

What is the best way to do this. I know I can use:

let elem = <HTMLElement> document.querySelector('my-page');

Just to make clear, I know the -ios prefix, and -md prefixes. But in my case I am detecting the device name, and i have want to have 2 different rules/classes for same ios platform.

and basically add a class direct to the 'my-page' tag, but I don't think this is a neat or good coding way, neither a great performer if you have lot of pages in the app.

Answer 1

EDIT

The way to access the element is with Angular's ElementRef class.

You could create an attribute directive to add to the element or if you want it to apply to the entire page, then maybe a component that you wrap the page contents. Below is an example of how to use it in an attribute directive.

import { Directive, ElementRef } from '@angular/core';

@Directive({
  selector: '[deviceType]'
})
export class DeviceTypeDirective {
  /*
     You could use a value provider as a constant that is set once 
     and a switch-case here to apply the proper class.
  */
    constructor(private renderer: Renderer2, private el: ElementRef) {
       this.renderer.addClass(this.el.nativeElement, 'yourclassname');
    }
}

Instead of a directive, you can use it directly in your component as follows:

@ViewChild('myElement') el:ElementRef;

constructor(private renderer: Renderer2, private el: ElementRef) {}

ionViewDidLoad() {
      this.renderer.addClass(this.el.nativeElement, 'yourclassname');   
}

In your template, you'll add the reference variable as follows:

<ion-content #myElement>...</ion-content>

ORIGINAL ANSWER (leaving this here for others)

This is baked into the framework already. Ionic automatically adds platform-specific classes to all of the components and most elements. Using a combination of the built-in platform specific Sass variables and CSS selector combinators, you can style any of the elements on the page without having to add your own page class.

IONIC COMPONENT Sass Variables

Ionic components (such as alerts, modals, cards, etc.) all have platform-specific Sass variables that are injected automatically. Each component page in the docs describes the individual component variables by platform. The complete list can be found here.

But let's say you wanted to change the background-color of the ion-content to a different color on iOS devices only. Here, you can use CSS to take advantage of the injected classes. Below are examples for each of the elements mentioned in your question:

ION-HEADER for iOS

To change the background color of the header in the ion-header on iOS devices, you'd target the toolbar, providing enough specificity to override the framework CSS like this:

.header-ios .toolbar-background-ios {
    background-color: purple;
}

ION-TITLE for iOS

Similarly, if you want to change the font color in the title on iOS devices, use:

toolbar-title.toolbar-title-ios {
    color: lavender;
}

ION-CONTENT for iOS

The framework doesn't inject a platform-specific class for the ion-content element, but you can use the adjacent sibling combinator in CSS to select it since it is an adjacent sibling of the header, which does get the platform-specific class. The rule below will set the background color of the ion-content element to the color purple, but only for iOS devices.

.header-ios + ion-content.content {
    background-color: violet;
}