I am looking for a way to display a component dynamically from a string.
For Example, Existing Component:
<app-header></app-header
I need to include this in another component. I would love to do something like:
TS:
@ViewChild('componentHost1', { read: ViewContainerRef }) componentHost1: ViewContainerRef;
const componentFactory = this.componentFactoryResolver.resolveComponentFactory('<app-header></app-header>');
this.componentHost1.clear();
this.componentHost1.createComponent(componentFactory);
HTML:
<ng-template #componentHost1></ng-template>
I do not know the component before it is passed so I cannot use the actual component only a string of the component usage.
Is there a way to render/compile this from a string to use in another component?
Or even better it would be awesome to just do:
<div [innerHtml]="'<app-header></app-header>'"></div>
