Cómo Renderizar HTML en un Div con Angular
En Angular, es posible renderizar contenido HTML dinámico en un elemento div usando el binding de propiedades, la directiva innerHTML, y teniendo en cuenta las prácticas de seguridad que el framework implementa. A continuación, veremos cómo hacerlo paso a paso para integrar contenido HTML directamente en un componente de Angular.
Usando innerHTML en Angular
Angular permite que se inyecte HTML en una etiqueta div o cualquier otro elemento usando la directiva innerHTML. Para esto, basta con definir el contenido HTML en una variable y enlazarla en la plantilla de nuestro componente.
Pasos para Renderizar HTML en un Div
1. Definir el Contenido HTML en el Componente
En el archivo TypeScript de tu componente (por ejemplo, app.component.ts), define una variable que contenga el HTML que quieres renderizar:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
htmlContent: string = '<h2>Bienvenido a Angular</h2><p>Este es un ejemplo de contenido HTML renderizado dinámicamente.</p>';
}2. Usar innerHTML en la Plantilla
En el archivo de plantilla del componente (por ejemplo, app.component.html), utiliza el binding [innerHTML] en el div o cualquier otro elemento en el que deseas insertar el HTML:
<div [innerHTML]="htmlContent"></div>
Con esto, Angular tomará el contenido de htmlContent y lo renderizará dentro del div.
Consideraciones de Seguridad
Angular aplica una política de seguridad para evitar la inyección de código malicioso (XSS) al trabajar con contenido HTML dinámico. Cuando uses innerHTML, Angular sanitiza el contenido automáticamente, eliminando cualquier código potencialmente peligroso.
Sin embargo, si tienes contenido HTML en el que confías y no quieres que Angular lo sanitice, puedes utilizar el servicio DomSanitizer:
import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
htmlContent: SafeHtml;
constructor(private sanitizer: DomSanitizer) {
const rawHtml = '<h2>Bienvenido a Angular</h2><p>Contenido sin sanitizar.</p>';
this.htmlContent = this.sanitizer.bypassSecurityTrustHtml(rawHtml);
}
}
Luego, puedes usar [innerHTML]="htmlContent" en la plantilla como en el ejemplo anterior.
Ejemplos de Uso Común
Renderizar HTML desde una API
Si obtienes contenido HTML de una API, puedes asignarlo a la variable htmlContent después de realizar la solicitud HTTP:
import { HttpClient } from '@angular/common/http';
export class AppComponent {
htmlContent: string = '';
constructor(private http: HttpClient) {
this.http.get('https://example.com/api/content', { responseType: 'text' })
.subscribe(data => this.htmlContent = data);
}
}Incluir Contenido HTML Condicionalmente
También es posible mostrar diferentes bloques HTML en función de condiciones. Esto es útil para mostrar contenido HTML en función de ciertos criterios:
<div *ngIf="showContent" [innerHTML]="htmlContent"></div>Referencias
Para más información, puedes consultar la documentación oficial de Angular sobre sanitización de contenido dinámico.
Jorge García
Fullstack developer