ngIf and ngFor on same element

Question

I have a problem when I use *ngFor and *ngIf on the same element.

  <div
    *ngFor="let recipeStep of RecipeSteps; let i = index"
    *ngIf="position === i">
    {{ recipeStep }}
  </div>

  <button ion-button small (click)="previous()">Previous</button>
  <button ion-button small (click)="next()">Next</button>

I know the easy solution is to move the *ngIf on a new element. For Example:

<ng-container *ngIf="position === i">
 <div *ngFor="let recipeStep of RecipeSteps; let i = index">
  {{ recipeStep }}
 </div>
<ng-container>

but when I use this solution I can't use i variable. and this solution hide all element on <ng-container>

So, this buttons is not useful now

<button ion-button small (click)="previous()">Previous</button>
<button ion-button small (click)="next()">Next</button>

this typescript fill

position: number;
ionViewDidLoad() {
  this.position = 1; 
}

next() {
  this.position = this.position + 1;
}
previous() {
  this.position = this.position - 1;
}

My question is Are there different way use *ngFor and *ngIf on the same element.

If there are no way are there different way to be this buttons useful

You can put the `ngFor` directive on the `ng-container` and the `ngIf` directive on the `div`. — ConnorsFan, Jan 24 '18 at 14:54

score 4 · Accepted Answer · answered Jan 24 '18 at 14:54

4

You just need to put the ngIf and the ngFor the other way around:

 <div *ngFor="let recipeStep of RecipeSteps; let i = index">
  <ng-container *ngIf="position === i">{{ recipeStep }}</ng-container>
 </div>

answered Jan 24 '18 at 14:54

Plog

9,164
5
41
66

1

This would produce an empty div for the "hidden" element. If the div has some styling (e.g. padding + border + margin), you will see it. You could keep the `ng-container` outside and swap only the directives, in order to remove the div completely. – ConnorsFan Jan 24 '18 at 15:13

score 2 · Answer 2 · answered Jan 24 '18 at 14:58

As you can see in this answer here Angular does not support more than one structural directive on one element.

You need to use your *ngIf inside the *ngFor:

<div *ngFor="let recipeStep of RecipeSteps; let i = index">
  <div *ngIf="position === i">
   {{ recipeStep }}
  </div>
</div>

*ngIf and *ngFor on same element

2 Answers2

ngIf and ngFor on same element