Load component via innerHtml in angular5

Question

In my application there are 9 widgets, each widgets will have a zoom option. For showing zoom option created the common zoom component to show the zoomed component.

On click of zoom option selected component name passed to the zoom component and creating the html tag along with the component name and tried to show the component via innerHtml but component is not appearing in the zoomed component.

Tried with mat-progress-bar static html

zoom-component.html

<div  style="border:2px solid green" #dataContainer></div>

zoom-component.component.ts

export class ProjectDetailsComponent implements OnInit {
  @ViewChild('dataContainer') dataContainer: ElementRef;
ngOnInit() {
    this.widget = "<mat-progress-bar></mat-progress-bar>";
    this.dataContainer.nativeElement.innerHTML = this.widget;
}
}

By direct innerHTML through the error

<div [innerHTML]="{{widget}}" style="border:2px solid green"></div>

Parser Error: Got interpolation ({{}}) where expression was expected at column 0 in [{{widget}}]

Answer 1

First Issue Its syntax error , coz of that you are getting error of :

Parser Error: Got interpolation ({{}}) where expression was expected at column 0 in [{{widget}}]

Change from :

[innerHTML]="{{widget}}"

to

[innerHTML]="widget"

Second Issue : to load component dynamically you can't use innerHtml , you should use componentFactoryResolver