how to hide a component if all sub-components are hidden ngIf

Question

For example consider the code:

<div *ngIf="-------NOTEMPTY-------">
  Parent
  <div *ngFor = 'let child of offsprings'>
    <div name="c1" *ngIf="conditions[child.name]">
      Child0
    </div>
  </div>
</div>

I want Parent division's ngIf to be false if all its child divisions' ngIf are false.

Note : It is not possible to me to collect all the child conditions in the ts file.

`offsprings.every(c => !c.condition)` – bugs Nov 21 '18 at 10:13 — bugs, Nov 21 '18 at 10:13

Nil Llisterri · Answer 1 · 2018-11-21T10:56:53.347

1

Try adding in the Parent *ngIf condition

!offsprings.every(child => !conditions[child.name]);

edited Nov 21 '18 at 10:56

answered Nov 21 '18 at 10:13

Nil Llisterri

787
7
19

Edited the answer to search the condition in the conditions map – Nil Llisterri Nov 21 '18 at 11:00

score 0 · Answer 2 · answered Nov 21 '18 at 11:41

Used a function call as *ngIf = checkIfExists() on parent.

<div *ngIf="checkIfExists()">
  Parent with children existing
  <div *ngFor = 'let child of offsprings'>
    <div name="c1" *ngIf="conditions[child.name]">
      Child0 {{conditions[child.name]}}
    </div>
  </div>
</div>

Function For Parent ngIf:
Appraoch is to traverse every element of offsprings array,
and check if conditions[child.name] exists.

checkIfExists() {
  let ifDefined: boolean;
    this.offsprings.forEach(e=> {
      if (this.conditions[e.name]) {
        ifDefined = true;
      } 
    });
    return ifDefined;
}

StackBlitz Working Demo

how to hide a component if all sub-components are hidden ngIf

2 Answers2