Solución:
1.
<div class="one" [innerHtml]="htmlToAdd"></div>
this.htmlToAdd = '<div class="two">two</div>';
Ver también En RC.1 algunos estilos no se pueden agregar usando sintaxis de enlace
- Alternativamente
<div class="one" #one></div>
@ViewChild('one') d1:ElementRef;
ngAfterViewInit() {
d1.nativeElement.insertAdjacentHTML('beforeend', '<div class="two">two</div>');
}
o para evitar el acceso directo al DOM:
constructor(private renderer:Renderer) {}
@ViewChild('one') d1:ElementRef;
ngAfterViewInit() {
this.renderer.invokeElementMethod(this.d1.nativeElement', 'insertAdjacentHTML' ['beforeend', '<div class="two">two</div>']);
}
3.
constructor(private elementRef:ElementRef) {}
ngAfterViewInit() {
var d1 = this.elementRef.nativeElement.querySelector('.one');
d1.insertAdjacentHTML('beforeend', '<div class="two">two</div>');
}
Con la nueva clase angular Renderer2
constructor(private renderer:Renderer2) {}
@ViewChild('one', { static: false }) d1: ElementRef;
ngAfterViewInit() {
const d2 = this.renderer.createElement('div');
const text = this.renderer.createText('two');
this.renderer.appendChild(d2, text);
this.renderer.appendChild(this.d1.nativeElement, d2);
}
Podrías hacer algo como esto:
htmlComponent.ts
htmlVariable: string = "<b>Some html.</b>";
// esto es html en código TypeScript que necesita mostrar
htmlComponent.html
<div [innerHtml]="htmlVariable"></div>
// así es como muestra el código html de TypeScript en su html
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)