I was able to create a dynamic component after one week of research. I came up with this:
import { Component, Input, ComponentRef,ViewChild,ViewContainerRef, ComponentFactoryResolver} from '@angular/core';
import { AfterViewInit,OnInit,OnDestroy} from '@angular/core';
import { OnChanges,SimpleChange,ComponentFactory} from '@angular/core';
import { TestModule } from './test.module';
import { TestComponent } from './test.component';
@Component({
selector: 'dynamic-detail',
template: `<div> <div #dynamicContentPlaceHolder></div> </div> `,
})
export class DynamicDetail implements AfterViewInit, OnChanges, OnDestroy, OnInit {
@ViewChild('dynamicContentPlaceHolder', {
read: ViewContainerRef
})
protected dynamicComponentTarget: ViewContainerRef;
// this will be reference to dynamic content - to be able to destroy it
protected componentRef: ComponentRef < IHaveDynamicData > ;
// until ngAfterViewInit, we cannot start (firstly) to process dynamic stuff
protected wasViewInitialized = false;
// wee need Dynamic component builder
constructor(
protected typeBuilder: DynamicTypeBuilder,
private componentFactoryResolver: ComponentFactoryResolver
) {}
/** Get a Factory and create a component */
protected refreshContent() {
if (this.componentRef) {
this.componentRef.destroy();
}
const childComponent =this.componentFactoryResolver.resolveComponentFactory(TestComponent);
this.componentRef = this.dynamicComponentTarget.createComponent(childComponent);
...
}
...
}
For my test component i have
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'dynamic-component',
template: 'i am dynamic',
})
export class TestComponent implements OnInit {
@Input() public entity: any;
constructor(){}
public ngOnInit(): void {}
}
and module
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { TestComponent } from './test.component';
@NgModule({
imports: [ CommonModule, BrowserModule ],
declarations: [ TestComponent ],
entryComponents: [ TestComponent ],
providers: [ ]
})
export class TestModule { }
It works fine. My question is, how can i pass dynamic template to the component?
Like for example in TestComponent
@Component({
selector: 'dynamic-component',
template: $dynamicTemplateVariable,
})
and in my main component
this.template = "<div>i am generated form another source</div>"
this.componentRef = this.dynamicComponentTarget.createComponent(childComponent, this.template);
The template can be gotten from any source, from and api too.