Cómo vincular contenido HTML en Angular

Cómo vincular contenido HTML en Angular

En este tutorial, aprenderemos cómo vincular contenido html sin procesar en Angular usando un ejemplo.

Angular nos ofrece la sintaxis de enlace de propiedad ([property]="expression") al usar esto, podemos vincular y mostrar el código HTML dentro de Angular.

Vincular HTML a Angular

Para vincular contenido HTML a angular podemos usar el [innerHtml] = "html" sintaxis de propiedad

Veamos un ejemplo:

aplicación.componente.html

<div style="text-align:center">
    <div [innerHtml]="someHtml"></div></div>

aplicación.componente.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  someHtml= "<h1>Hello angular</h1><p>good to see</p>";}

En el ejemplo anterior, enlazamos un div propiedad 'innerHtml' del elemento a un someHtml expresión. Entonces muestra los datos dentro de ese elemento div.



enlace html angular

Si quieres conocer otros artículos parecidos a Cómo vincular contenido HTML en Angular puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas