Add a glass to ion-page

Ionic Framework ionic-v3
1

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 name 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');
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.

2

hello,

for static and dynamic styling you can use ngclass and ngstyle from angular. Both can evaluate static, variable, function or tenary expressions to apply styling. See here for examples


or

Best regards, anna-liebt

3

You can use cordova plugin add cordova-plugin-device :

html

<my-page class="ion-page show-page"  [ngClass]="{'device-ios-iphonex': isIphonex}>"

typescript

if(device.model == 'iPhoneX '){
   this.isIphonex = true;
}else{
   this.isIphonex = false;
}
4

Thanks @Splinter1997. But my issue is how to apply over the very parent class, like ion-app or ion-page, which are not editable in the HTML file. I can set the above [ngClass] to a ion-header, ion-content, but that does not do the job for me, because I have alot of subclasses for the header , toolbar, which i want to parrent out to one global class applied over the ion-app or ion-page.
I guess I will still need to use document.querySelector :confused: