innerHTML
property is used to display the HTML content in your template.
You might be having some scenario where you’ll need to display the HTML template from a string where the interpolation syntax won’t work because it will display HTML tag as plain text in the template. so in that case innerHTML
will come into the place.
Now we’ll see how we can use innerHTML
in angular(2+) project.
In component file, we’ve INNER HTML PROPERTY BINDING EXAMPLE text which is wrapped inside h1
tag and stored it in htmlCode
variable. we want it to be displayed as html template inside the template.
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppRootComponent implements OnInit {
htmlCode="<h1>INNER HTML PROPERTY BINDING EXAMPLE</h1>";
constructor() {
}
ngOnInit() {
}
}
To display htmlCode
variable as html template, we’ll use innerHTML
property as following.
<div [innerHtml]="htmlCode"></div>
This will return the output as follows:
Output:
INNER HTML PROPERTY BINDING EXAMPLE