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.
Using innerHTML in angular project :
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
I hope you like this Using innerHTML in angular project article.
Also Read:
- Angular ngIf Directive
- Angular ngFor Directive
- Getting Started With Angular Reactive Forms
- Angular Reactive Forms With Built In Validators Example
- Angular Material Grid Layout Example
- Angular Material Card Example
- Angular Material List Example