Angular: font-size and accessibility

Angular-dynamic-font-size.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-header-accessibility',
  templateUrl: './header-accessibility.component.html',
  styleUrls: ['./header-accessibility.component.scss']
})
export class HeaderAccessibilityComponent implements OnInit {

  //Default and reset font size
  font_size = 16;

  //Increase, decrease and set default font size
  setFontSize(idd: string) {
    
    //calc font size
    if(idd === 'a+'){
      this.font_size += 1;
    } else if(idd === 'a-') {
      this.font_size -= 1;
    } else {
      this.font_size = 16;
    }
    
    //set font size
    let htmlRoot:HTMLElement = <HTMLElement> document.getElementsByTagName("html")[0];
    if (htmlRoot != null) {
       htmlRoot.style.fontSize = `${this.font_size}px`;
    }

  }

  constructor() { }
  ngOnInit(): void { }

}

pages.html

<span style="font-size: 0.5rem">Tamanho equivalente a 7.5px</span>

<h1 style="font-size: 2rem">Tamanho equivalente a 32px</h1>

<p style="font-size: 1rem">Tamanho equivalente a 16px</p>

styles.scss

html {
  font-size: 16px;
}

template.html

<li>
    <button (click)="setFontSize('a-')">A-</button>
    <button (click)="setFontSize('a')">A</button>
    <button (click)="setFontSize('a+')">A+</button>
</li>