Angular 2: Components removing themselves from the DOM

Question

I have one parent component with two child components (dataset-create and dataset-detail) in Angular2. The Parent component controls which of the two component is shown at any given time by using this code in its template:

<div [ngSwitch]="mode">
<template [ngSwitchWhen]="'create'">
    <dataset-create [dataset]="dataset" (close)="onDatasetFormClose()"></dataset-create>
</template>
<template [ngSwitchWhen]="'detail'">
    <dataset-detail [dataset]="dataset" (close)="onDatasetFormClose()"></dataset-detail>
</template>
</div>

The parent component listens for the event (close) from the children. When it receives it, a callback function is called (onDatasetFormClose()) which has the following code:

private onDatasetFormClose() {
    this.mode = "list";
}

This function changes the value of the mode variable. This causes both ngSwitchWhen statements to fail and thus the currently active child component gets destroyed.

Also, FYI, this is how the template of one of the child components looks like:

<form novalidate="novalidate">
    <button type="button" (click)="onClose()">close</button>
    <button type="submit" (click)="onSubmit()">submit</button>
    <label for="dataFileD">data</label>
    <input id="dataFileD" type="file" (change)="onFileChange($event)">
</form>

However, this solution looks "wrong" to me, because it relies on the parent component (thus making is harder to reuse it independently).

I guess another way to achieve a similar result would be to use a router. This solution not only sounds "too-bloated-for-no-reason", but also suffers from the same problem as my solution above: the child component can not be used independently.

Is it possible to have a child component remove itself from the DOM? What is the correct way to handle situations like this? Maybe having components removing themselves from the DOM is a bad Angular2 coding practice?

Thanks in advance.

Answer 1

I think it is fine for a component to require a parent component. Components that emit an event usually require a parent component. And sometimes components are more tightly coupled, or are intended/required to be used together. E.g., to implement tabs, we probably need a parent tabset component, in addition to the tab child components. E.g., see the ng2-bootstrap tabs implmenentation.

Relying on a parent component(s) might also be a conscious design decision. For example, if we are modeling our application using immutable application data (see Savkin blog), we might purposely prevent our component from modifying any application data. If a delete operation is required, we may emit an event in order to have some higher level component modify the application data (and then send it back to us via an input property).