Angular 2. How dynamically created component could call by itself the destroy method? - angular2-components

Question

I got stuck with the destroying of dynamic components. I would be really appreciate for some hints.
Here my root component, it adds perfectly on a page some components from a service:
/*Root*/
#Component({
selector: 'convertors',
template: "<div #target></div>"})
export class AppComponent {
#ViewChild('target', {read: ViewContainerRef}) target: ViewContainerRef;
private componentRef: ComponentRef<any>;
constructor(private componentFactoryResolver: ComponentFactoryResolver,
private viewContainerRef: ViewContainerRef){}
addComponent(){
let someComponent = this.service.getService("someComponent");
const factory = this.componentFactoryResolver.resolveComponentFactory(someComponent);
this.componentRef = this.target.createComponent(factory);
}}
Here my child component which is added by root component. It has to be self destroyed:
#Component({
selector: 'convertors',
template: "<button (click)="deleteComponent()" >Delete</button>"})
export class someComponent{
deleteComponent(){
/*How could I implement this function?*/
}
}
How could I implement the method deleteComponent() ?
Thank you!

Answer 1

Ok, my solution uses message service. Look here if you don't know what it does. it's very simple.
Firstly, I assign unique id to any dynamic component. Next I keep reference on the component and his id in a map.
private componentRef: ComponentRef<Component>;
onComponent(event: string){
let component = "ref to any component"
const factory = this.componentFactoryResolver.resolveComponentFactory(component);
let componentRef = this.target.createComponent(factory);
let id = "id" + this.index;
(<any>componentRef.instance).componentId = id;
this.idMap.set(id, componentRef);
this.componentRef = componentRef;
this.index += 1;
}
Secondly, event click on child's view sends his id to parent through message service. Take in account that "componentId: string" declared in a child. But it is assigned in the parent!
<a (click)="deleteComponent()"></a>
private componentId: string;
deleteComponent() : void {
this.messageService.sendMessage(this.componentId);
}
Lastly, our parent receives from message service the id. Next, it looks for child's reference in the map. Finally, we call native method this.target.remove("child index in componentRef") to remove component. Take in account, that componentRef has his own indexes of his children.
this.subscription = this.messageService.getMessage()
.subscribe(message => this.removeChild(message))
removeChild(message){
let component = this.idMap.get(message.id);
let indice = this.target.indexOf(component);
this.target.remove(indice);
this.idMap.delete(message.id);
}
If know how improve this solution write in commments. I have the feeling that it could be better. Thanks.