Can component invoke a self destroy event

Question

I have a parent component which opens a new component on click of a link, this new component is supposed to have a close button which on close sends a closing message to parent and destroy itself.

We can send the closing message using ngOnDestroy method, but how do I invoke the destroying of the child component.

<parent>     <child></child> //child to be opened on click but close                      //event should be inside the child componenet </parent> 

Do correct me if i am having some conceptual mistake here. Thanks

Answer 1

If you add a component using ViewContainerRef.createComponent() like shown in Angular 2 dynamic tabs with user-click chosen components, then the component can destroy itself when you pass cmpRef to the created component.

Otherwise I don't think there is a way. You can pass a value to the parent so that an *ngIf removes the component.

<child *ngIf="showChild" (close)="showChild = false"></child> 

class ParentComponent {   showChild:boolean = true; } 

class ChildComponent {   @Output() close = new EventEmitter();    onClose() {     this.close.emit(null);   } } 

Answer 2

Not sure about the cleanliness of such a solution, but I used:

this.viewContainerRef     .element     .nativeElement     .parentElement     .removeChild(this.viewContainerRef.element.nativeElement);