Expose ionic scss variable in angular component

Hello there,

I have a component that needs to take up the full screen of the application in the ion-content. The height needs to be calculated in order to normalise some of the features within it.

For this reason, I need to be able to calculate the height that the ion-content will take.

Through various tests, android and older iOS devices work, but we seem to have hit an issue with the iPhone X, because the header/status bar for those devices has a different behaviour and size.

Now I’ve looked through the internet and I think the most “robust” solution is to get the values of these styles:

–ion-safe-area-top
–ion-safe-area-bottom

How could we query the values of those particular css variables in the angular component?

Any help greatly appreciated.

MDN says the same way you’d grab any other property. You would typically use @ViewChild to grab the element reference.