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>

BerkantAkcil · Accepted Answer · 2021-02-14 11:47:31Z

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

answered Feb 14, 2021 at 11:47

BerkantAkcil

111 bronze badge

Sign up to request clarification or add additional context in comments.

2 Comments

manu george Over a year ago

Thank you for your reply but the problem is I have to do this task on the template level. Is there any way that by just clicking the button in the header component it will make the change in another component's template without calling any observable and subscribing it on another component which indeed changes the ngClass value dynamically? The problem is I have more than 100 component in the application I can't take a risk to make a change in the component loaded in the view I have to call a function in every other component where it isn't needed.

possum Over a year ago

That's a completely reasonable answer to the question you asked. You should consider specifying the problem with details you consider important if you want answers to address a specific case

Collectives™ on Stack Overflow

How to change font size dynamically using Angular 9/10

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related