How to change font size dynamically using Angular 9/10

Question

I have an application where I have a header component with two buttons One is to enlarge the text of the whole page and the other to minimize the text on the page. I want this functionality where when I click a button in the header component it(For eg: A+ or A-) makes changes to the font-size of the text in another component's template loaded in the view. Is there any way I can achieve this in angular 9 or 10 without using any observable that will change the value of ngClass or ngStyle in the loaded component dynamically?

Main.component.html file

<HeaderComponent></HeaderComponent>
<div>
  <router-outlet></router-outlet>   //Here every other component in the application loads
</div>

Header.component.html file

<div>
   <button (click)="enlargeText()">A+</button>
   <button (click)="minimizeText()">A-</button>
</div>

Answer 1

Use Ngclass and Ngstyle in the buttons.

Then add functions for those styles with classes to make it work.

https://coryrylan.com/blog/introduction-to-angular-ngclass-and-ngstyle