How to bind an HTML in Angular
In this tutorial, we are going to learn about binding a raw html in angular with the help of an example.
Angular offers us property binding syntax([property]="expression"
) by using that we can bind an html in angular.
Binding Html
Let’s see an example.
app.component.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>";}
app.component.html
<div style="text-align:center">
<div [innerHtml]="someHtml"></div></div>
In the above code, we have bind a div
innerHtml property to a someHtml
expression so that we can see the real html.