i am experimenting of how to change font size of a variable at .html when the variable contain whitespace
at .ts page, the code to remove the whitespace
this.contents = this.sanitizer.bypassSecurityTrustHtml(this.product['description']);
at .html page, i displayed is as
<p id="p" class="p" [innerHtml]="contents"></p>
it works nice, but i had another function of changing font size dynamically when onclick button, everything inside [innerHtml] does not perform ChangeFontSize
example as follows for .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>
div h1 changes dynamically div p with {{contents}} changes dynamically showing whitespace br>   etc and extra Safe value must use [property]=binding showing
[innerHtml] removed the whitespace but not able to changefontsize,
Hope anyone can enlightenment me what are the possible methods of removing
extra Safe value must use [property]=binding and br><br>  
or changing the font-size of [innerHtml]=“contents”
thank you very much
:bowing_man: :bowing_man: :bowing_man:
In component ts
contents = `This starter project comes with simple tabs-based layout for apps that are
going to primarily use a Tabbed UI.`;
fontSize = 10;
constructor(public navCtrl: NavController) {}
increase() {
this.fontSize++;
}
decrease() {
this.fontSize--;
}
In template:
<p [style.font-size.px]="fontSize" class="p" [innerHtml]="contents"></p>
<button type="button" (click)="increase()">Increase</button>
<button type="button" (click)="decrease()">Decrease</button>
Hope it help. I think you need global class like this.
Example
HTML
<div class="body fontSize16"> // Add font class to parent
<div class="container">
<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>
TS
import { Renderer2, RendererFactory2 } from '@angular/core';
private fontsizes = [12, 14, 16, 18];
private fontClass = 'fontSize';
private fontIndex = 0;
private renderer: Renderer2;
ngOnInit(): void {
// I think you should set defualt fontsize.
}
constructor(rendererFactory: RendererFactory2) {
this.renderer = rendererFactory.createRenderer(null, null);
}
ChangeFontSize(type) {
// Add more condition. Example array lenght or defualt value
if (type === 'increase') {
this.fontIndex + 1;
} else if (type == 'decrease') {
// pls add more condition. example check index of array
this.fontIndex - 1;
}
this.removeClass(this.fontClass + this.fontsizes[this.fontIndex ]);
this.addClass(this.fontClass + this.fontsizes[index]);
this.fontIndex = index;
}
addClass(className: string) {
this.renderer.addClass(document.body, className);
}
removeClass(className: string) {
this.renderer.removeClass(document.body, className);
}
CSS
body.fontSize16 .p{
font-size: 16px;
}
SASS
body {
&.fontSize16 {
.p{
font-size: 16px;
}
}
}