Filtering on a loop by *ngIf in Angular giving error

Question

I am trying to filter out some items by *ngIf on a list achieved by looping, but it is giving error. Kindly help.

abc.component.html

  <ul>
    <li *ngFor="let x of students" *ngIf="x.age < 30">{{x.name}},{{x.age}}</li>
  </ul>

abc.component.ts

  students = [
    {name: "Jack", age: 29, gender:"male", country: "USA"},
    {name: "Ronald", age: 33, gender: "male", country: "UK"},
    {name: "Lisa", age: 19, gender: "female", country: "UK"},
    {name: "Donald", age: 43, gender: "male", country: "Austrailia"},
    {name: "Simera", age: 23, gender: "female", country: "Italy"}
  ];

Error:

Kindly, help in filtering out rows of li items based on age < 30 in the above example. Thank You.

You can't have a `ngIf` and `ngFor` on the same element. Filter your array in the TS code with `students.filter(s => s.age < 30)` — user184994, Sep 29 '18 at 10:55
Possible duplicate of [How to apply filters to \*ngFor?](https://stackoverflow.com/questions/34164413/how-to-apply-filters-to-ngfor) — Jan B., Sep 29 '18 at 11:12
Using pipes for this is indeed a bad decision. The best solution is to simply filter in code instead of in the template, but learning how to get rid of the error above is important too. — Lazar Ljubenović, Sep 29 '18 at 11:15
@user184994: if that was an answer, I would have accepted it. (rather than comment). -- it worked. — Deadpool, Sep 29 '18 at 11:15
Just wondering, what does speak against using pipes? I've never had issues with it and it that solution is found in the Angular guide, too: https://angular.io/guide/pipes#pipes-and-change-detection — Jan B., Sep 29 '18 at 11:50

Lazar Ljubenović · Accepted Answer · 2018-09-29T11:17:50.633

1

The error pretty much spells it out for you. Use ng-container for one of them. It's a special tag which won't be rendered in the template, but allows you to place structural directives (like ngIf, ngFor) on it.

<ul>
  <ng-container *ngFor="let x of students">
    <li *ngIf="x.age < 30">
      {{x.name}},{{x.age}}
    </li>
  </ng-container>
</ul>

It's however, advisable to filter out elements in the code rather than in the template. Use the Array#filter method and specify your predicate as the argument. This makes code more readable, testable, performant and has better separation of concerns.

edited Sep 29 '18 at 11:17

answered Sep 29 '18 at 10:58

Lazar Ljubenović

18,976
10
56
91

1

you've basically posted same answer posted by sajeetharan except the ngFor on ul – Sep 29 '18 at 11:21
@faceturn Their answer generated `
- 1
- 2
`, this answer generates `
- 1
- 2
`, which was _completely_ different (and theirs is now deleted).
– Lazar Ljubenović Sep 29 '18 at 11:23
yes that's what i mentioned in the comment too. what i meant was the second part of your answer – Sep 29 '18 at 11:24
I added the part about `filter` when I've seen from OP's comments on the question itself that they want _to filter_, not to learn _why the error happens and how to avoid it in general_. – Lazar Ljubenović Sep 29 '18 at 11:25

Filtering on a loop by *ngIf in Angular giving error

1 Answers1