Angular 5从父组件中删除子组件

Question

I want to remove one of the child components from its parent when the user clicks on the close button present in the child component. I have 3 components in my parent component.

<app-header></app-header>
<app-map></app-map>
<app-rules *ngIf="selectedId"></app-rules>

I tried to update the value of selectedId to undefined on click of a close button inside . but it is not taking the updated value and closing the component.

Answer 1

Your problem might be that *ngIf expects a boolean state. undefined is an invalid state when you validate a number. You have to implement a comparison then eg

// selectedId is a number
<app-rules *ngIf="selectedId > 0"></app-rules>

or

// selectedId is a string
<app-rules *ngIf="selectedId !== undefined"></app-rules>

// in case of a string this is also possible
<app-rules *ngIf="selectedId"></app-rules>