Using innerHTML in angular 2+ project

by

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

Also Read:

Leave a Comment