Angular 4 - show/Hide elements on ngFor directive

Question

I have a list of lists and I want to hide/show internal list based on an attribute value

<md-list *ngFor="let el of data">
    <md-list-item *ngFor="let item of el.items" >
      <h4 mdSubhead]er>{{item.name}}</h4>
    </md-list-item>h4
  </md-list>

I have tried with *ngIf, but Angular4 permit only one template binding for an element.

How can I implement this beavior?

what is the show / hide condition? You may use an `ng-container` or try with the `[hidden]` attribute. — briosheje, Sep 01 '17 at 16:43
Possible duplicate of [\*ngIf and \*ngFor on same element causing error](https://stackoverflow.com/questions/34657821/ngif-and-ngfor-on-same-element-causing-error) — Z. Bagley, Sep 01 '17 at 17:06

Sajeetharan · Answer 1 · 2017-09-01T18:00:57.053

3

You can just do by adding a extra div with a condition or ng-container which would be the best for angular

<md-list *ngFor="let el of data">
  <ng-container *ngIf="el.something">
    <md-list-item *ngFor="let item of el.items" >
      <h4 mdSubheader>{{item.name}}</h4>
    </md-list-item>
  </ng-container>
 </md-list>

edited Sep 01 '17 at 18:00

answered Sep 01 '17 at 16:41

Sajeetharan

216,225
63
350
396

Pankaj Parkar · Answer 2 · 2017-09-01T16:50:16.370

2

Use ng-container (no need of extra element) and on the same use *ngIf to hide/show DOM conditionally.

<md-list *ngFor="let el of data">
  <ng-container *ngIf="el.show">
    <md-list-item *ngFor="let item of el.items" >
      <h4 mdSubhead]er>{{item.name}}</h4>
    </md-list-item>
  </ng-container>
</md-list>

edited Sep 01 '17 at 16:50

answered Sep 01 '17 at 16:48

Pankaj Parkar

134,766
23
234
299

1

Cleverest solution since `ng-container` won't be added to the DOM. This is the correct approach. – briosheje Sep 01 '17 at 16:48
ng-container > ng-template > DOM element for cases like this – Jota.Toledo Sep 01 '17 at 17:36

score 1 · Answer 3 · answered Sep 01 '17 at 16:57

1

I think best way might be to get data before, then remove unneeded items and iterate through remaining lists. But if really need in template, so you can use ng-template and long *ngFor version, so something like:

<ng-template ngFor let-el [ngForOf]="data" let-i="index">
 <md-list #el>
 <ng-template ngFor let-item [ngForOf]="el.items" let-i="index">
  <md-list-item #item>
    </md-list-item>h4
  </ng-template>
 </md-list>
</ng-template>

answered Sep 01 '17 at 16:57

Julius Dzidzevičius

10,775
11
36
81

1

Just to add to John Snow you can add a filter to filter out what you don't want. – Aaron Rabinowitz Sep 01 '17 at 18:01

score 0 · Answer 4 · edited Sep 01 '17 at 17:25

0

Use <ng-container> as mentioned here : <ng-container> to the rescue

<md-list *ngFor="let el of data">
    <ng-container *ngIf="your-condition-here">
        <md-list-item *ngFor="let item of el.items" >
            <h4 mdSubhead]er>{{item.name}}</h4>
        </md-list-item>
    </ng-container>
</md-list>

edited Sep 01 '17 at 17:25

Vikhyath Maiya

3,122
3
34
68

answered Sep 01 '17 at 16:48

Sasidhar Vanga

3,384
2
26
47

Angular 4 - show/Hide elements on ngFor directive

4 Answers4