I have been experimenting with changing the font size of a variable in .html when the variable contains whitespace. In my .ts page, I use the following code to remove the whitespace:
this.contents = this.sanitizer.bypassSecurityTrustHtml(this.product['description']);
When displaying it on the .html page, I use:
<p id="p" class="p" [innerHtml]="contents"></p>
This works well, but I also have a function to change the font size dynamically upon clicking a button. However, everything inside [innerHtml] does not respond to the ChangeFontSize function. Here is an example from the .html page:
<div class="container">
<div">
<ion-button (click)="ChangeFontSize('increase')"> A+ </ion-button>
<ion-button (click)="ChangeFontSize('decrease')"> A- </ion-button>
</div>
<h1 id="h"> {{product.title}}</h1>
<p id="p">{{contents}}</p>
<p id="p" class="p" [innerHtml]="contents"></p>
</div>
The h1 element changes dynamically, and the p element with {{contents}} shows whitespace like br>  , etc. Additionally, using [property]=binding will display extra Safe values.
The issue is that [innerHtml] removes the whitespace but is unable to change the font size. Can anyone suggest possible methods for removing or changing the font-size of [innerHtml]="contents"?
Thank you very much! 🙇🏻♂️🙇🏻♂️🙇🏻♂️