Angular: Change Font Size options for users in IE11 (CSS-Variables)

Question

I am developing an Angular application. From the webpage, the user can select a small, medium or large fonts (medium is the default) and based on that we have to change the font size all over the page. Now for other browsers, I can use var() but it is not compatible with IE. So one way of doing it is manually applying font-size in every single HTML tags either using ngStyle or ngClass. But I find this method really bad. Is there another way of doing it? I don't want to write this piece of code in every single component.

<div class="hm-header-title" [ngStyle]="fontSize()"></div>

fontSize(){
    return this.ieStyleService.fontSize() // ex return {'font-size': '11px'}
}

Answer 1

Try applying it manually for IE alone.

changeFontSize(fontSize){
    ieFontSizeClass=[
        '.someClass1 *',
        '.someClass2 *',
        ...
        ...
        ...
    ]

    if(this.isIE()){
        ieFontSizeClass.forEach((className: string) => {
                let elements = document.querySelectorAll(className) as NodeListOf<HTMLElement>;

                let i = 0;
                for (i = 0; i < elements.length; i++) {
                    elements[i].style.fontSize = fontSize;
                }
            });
    }
}

NOTE that adding * is important because it will be applied to all the child elements.