estoy experimentando cómo cambiar el tamaño de fuente de una variable en .html cuando la variable contiene espacios en blanco
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>funciona bien, pero tenía otra función para cambiar el tamaño de fuente dinámicamente cuando se hace clic en el botón, todo lo que está dentro de [innerHtml] no realiza ChangeFontSize
ejemplo de la siguiente manera para la página .html
<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 cambia dinámicamente div p con {{contenido}} cambia dinámicamente mostrando espacios en blanco br>   etc. y el valor seguro adicional debe usar [propiedad] = visualización vinculante
[innerHtml] eliminó el espacio en blanco pero no pudo cambiar el tamaño de fuente,
Espero que alguien pueda aclararme cuáles son los posibles métodos para eliminar
extra Safe value must use [property]=binding and br><br>  o cambiando el tamaño de fuente de [innerHtml]=“contents”
Muchísimas gracias
:bowing_man: :bowing_man: :bowing_man:
En componente 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--; }En plantilla:
<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>Espero que ayude Creo que necesitas una clase global como esta.
Ejemplo
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; }HABLAR CON DESCARO A
body { &.fontSize16 { .p{ font-size: 16px; } } }