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.

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>";}

<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.