Tengo un objeto en el archivo view.component.ts que viene del backend. Se supone que es la descripción de un producto. Tiene más de 500 líneas de texto. por ejemplo:
{"description" : "Hello my Name is Param Bedi.\r\nHow are you\r\n\r...continue till 500 lines and more"}Necesito mostrar esto en la vista Angular. Pero simplemente viene directamente, es decir, contiene todos los "\ r \ n", etc. No está insertando una nueva línea en lugar de \ n.
Esto es lo que estoy haciendo en view.component.html
<div> <p>{{ data["description"] }}</p> </div>¿Qué debo hacer para poder mostrar los datos con nueva línea y otros caracteres especiales funcionando?
Puedes usar HTMLElement.innerText :
<div> <p [innerText]="data.description"></p> </div> O, si necesita una salida de caracteres especiales, use Element.innerHTML (reemplazando nuevas líneas con <br> ):
<div> <p [innerHTML]="data.description.replace(/(\r\n|\r|\n)/g, '<br>')"></p> </div>Solución 1: puede usar espacios en blanco: línea previa en css. Puedes consultar aquí CSS White Space .
Solución 2: puede usar Textarea con solo lectura .
<textarea name="description" readonly [(ngModel)]="data.descrption" style="resize: none;" ></textarea>