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';


    templateUrl: "html file"


export class MainPageComponent {

    @ViewChild('containerDiv') containerDiv: ElementRef;

    loadData(data) {

        this.containerDiv.nativeElement.innerHTML = data;