Tengo un html guardado en la base de datos, que obtengo de la llamada API. esta es la respuesta
ex.
htmlText = <div class="dragBlock"> <div id="Name">Test</div> <div id="Age">23</div> </div>A la vista, estoy mostrando esto como
<div class="preview"> <div [innerHtml] = "htmlText | safeHtml"> </div> </div>esto funciona bien, pero quiero cambiar el Html interno de id Name y Age
En el archivo ts estoy haciendo esto
document.getElementById('Name').innerHtml = 'UserName';pero esto no funciona, ¿podemos hacer esto en Angular? Si es así, ¿cómo?
Puede usar una tubería para manipular el HTML.
import { Pipe, PipeTransform } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; @Pipe({ name: 'modify' }) export class ModifyPipe implements PipeTransform { constructor(private _domSanitizer: DomSanitizer) {} transform(html: string, args?: any): any { return this._domSanitizer.bypassSecurityTrustHtml(this.modify(html)); } private modify(html: string): string { // Do your manipulation here by replacing with regex return string; } } <p [innerHTML]="htmlText | modify"></p>Necesitas usarlo así:
document.getElementById('Name').innerHTML = 'UserName';Vea este Stackblitz: https://stackblitz.com/edit/angular-sbxeon?file=src%2Fapp%2Fapp.component.ts