Tengo un componente que se parece a esto:
import { Component, VERSION } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { expandText: boolean = false; constructor() {} ngOnInit() {} stringShortener(text: string) { let str = text; if (this.expandText === false) { if (str.length > 80) { str = str.substring(0, 80 - 3) + '...' + ' ' + "<span style='color: red'>see more</span>"; } } else { str = str + '...' + ' ' + "<span style='color: yellow'>see more</span>"; } return str; } }En el lado HTML se ve algo como:
<div class="wrapper" (click)="expandText = !expandText"> <p>{{ stringShortener("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum") }}</p> </div> El problema es que el HTML de myhtml no se procesa. Lo intenté con innerHTML , y eso resultó en un lapso de alguna manera. Pero si el lapso es algo como: <span style="color: red"> , o incluso si uso [ngStyle] , [style.color] , bueno, el estilo no se aplica. Entonces solo obtengo un lapso con el texto adentro.
Entonces, ¿cómo se hace esto con la representación adecuada?
EDITAR: he creado un Stackblitz que muestra el problema: https://stackblitz.com/edit/angular-ivy-xdi3z5?file=src/app/app.component.html
El problema es que está pasando su bloque con la etiqueta span como texto, por lo que Angular simplemente lo imprime como un texto normal.
Puede lograr la funcionalidad deseada con la directiva *ngIf que mostrará el bloque de intervalo necesario, agregando una función que le indicará si el texto es demasiado largo.
Parece que olvidaste las llaves :)
<div (click)="expandText= !expandText"> <p>{{stringShorterner(myText)}}></p> </div>