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> &nbsp 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>&nbsp;&nbsp;&nbsp;&nbsp

or changing the font-size of [innerHtml]=“contents”

thank you very much

:bowing_man: :bowing_man: :bowing_man:

CodePudding user response：

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>

Ionic Demo

CodePudding user response：

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;
        }
     }
   }