HTML/Inner HTML value binding in Angular

When we want to bind the html value usually we bind using innerHTML as given below .

 

<div [innerHTML]="yourVal"></div>

Another way to bind is create a div and give an id.

<div #containerDiv></div>

In your angular file add reference to this object

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({

    templateUrl: "html file"

})

export class MainPageComponent {


    @ViewChild('containerDiv') containerDiv: ElementRef;


    loadData(data) {

        this.containerDiv.nativeElement.innerHTML = data;

    }

}