How to apply condition in ngFor in angular?

Question

i want to loop the user list with condition

<li *ngFor="let user of users" *ngIf="user.age>25"> {{user.name}} </li>

i know this is wrong. but,i want to use come like this. is there any possible way to this?

score 2 · Answer 1 · answered Sep 17 '19 at 11:19

2

You can use ng-container as follows

<ng-container *ngFor="let user of users" >
   <li *ngIf="user.age>25">
      {{user.name}}
   </li> 
</ng-container>

answered Sep 17 '19 at 11:19

Sajeetharan

it working well, but id creating unwanted dom like it is not a problem but is there any way to stop that also? – Ragulan Sep 17 '19 at 11:35

score 0 · Answer 2 · answered Sep 17 '19 at 11:19

You can't apply more than one structural directive to the same element. Just use ng-container:

<ng-container *ngFor="let user of users">
<li  *ngIf="user.age>25"> {{user.name}} </li>
<ng-container>

ng-container is

a grouping element that doesn't interfere with styles or layout because Angular doesn't put it in the DOM.

2 Answers2