How can I destroy an Angular component?

Question

I'm making a modal and I made it a component <modal-component>.

Inside <modal-component> I have a close button. I want to destroy <modal-component> when I click that button.

Something like this:

<button (click)="closeModal()">Close</button>

I also could make the close button a component. Something like <close-modal> if neccesary.

Is this possible?

Answer 1

Parent must destroy its child. So you can send an event from child

@Output()
onClose: EventEmitter<boolean> = new EventEmitter();

...
closeModal() {
    this.onClose.emit(true);
}

And capture the event in parent:

<modal-component *ngIf="showModal" (onClose)="modalClosed($event)">

And parent component:

modalClosed(isClosed) {
    this.showModal = false;
}

*ngIf directive will take care of the rest.

Might be a mistake or two, I'm on a mobile...