How to change font size for innerHtml of a variable with whitespace, extra Safe value must use [property]=binding

Ionic Framework
1

hello World,

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:

2

Better not to use innerHtml but dynamically assign css classes to template content

Angular has multiple ways of doing so

3

hello ! Tommertom, how are you? :grinning: :grinning:

i have tried using {{ }} to display the variable, but it shows out the whitespaces of & lt;p> <br><br>&nbsp;&nbsp;&nbsp;&nbsp; all these whitespaces including the descriptions.

  &lt;br&gt;&lt;br&gt;&nbsp;&nbsp;&nbsp;&nbsp;

tried using str.replace methods but not able to remove them. maybe my methods is not proper?

do you have any suggestion?

4

Well, not sure if I fully grasp what you are doing, but it seems that you are trying to control the styling of how content is displayed within a variable. And that isn’t necessarily the easiest/best route. It would take to understand all css controlling the display of that element (and the exact content of the variable), to know where you are going wrong.

In any case, try to achieve what you want with css OUTSIDE this.content. And interpolating using {{}} is actually quite a proper way. The question is what you do outside the {{}} and make sure this.content does not contain any html/css

5

yup, from the api data, the object contains whitespaces, so when i {{}} to .html page, the whitespaces shows, if i use innerHtml, the whitespaces is gone, but not able to adjust font sizes (innerHtml), but {{}} is able to adjust font sizes

6

Then I would strip the whitespaces from the object before presenting.

Cleaning the data

7

yes, i did str…replace(/%3/g,’’); or trim(), String() etc

i give it another try, thank you Tommertom for pointing the direction “strip whitespaces”

:bowing_man:

2 Likes