I'm trying to render DOM elements based on a condition using directive ngIf. The condition is determined in a for loop using ngFor.

To explain further, in the template I have the following:

<div class="flex-card" *ngFor="let thing of things; trackBy: trackByFn">
<div class="card" *ngIf="displayCta">
...
</div>
</div>

In my ponent I have some corresponding property which is initialised to false:

 displayCta = false;

and the corresponding function used by trackBy in the same ponent is as:

trackByFn(index: any, item: any) {
  this.displayCta = (index % 3 === 0);
}

What I would expect is that the element with class card would be rendered when displayCta is set to true. Debugging this does show that displayCta toggles between true and false.

However what's rendered is purely based on the initial state of displayCta, not the logic that modifies it's state.

Is this down to the lifecycle of the ponent i.e. it looks at the initial state of displayCta, decides whether it's a truthy/falsey does all the rendering and after that the function trackByFn is invoked making no difference to what's rendered?

I'm trying to render DOM elements based on a condition using directive ngIf. The condition is determined in a for loop using ngFor.

To explain further, in the template I have the following:

<div class="flex-card" *ngFor="let thing of things; trackBy: trackByFn">
<div class="card" *ngIf="displayCta">
...
</div>
</div>

In my ponent I have some corresponding property which is initialised to false:

 displayCta = false;

and the corresponding function used by trackBy in the same ponent is as:

trackByFn(index: any, item: any) {
  this.displayCta = (index % 3 === 0);
}

What I would expect is that the element with class card would be rendered when displayCta is set to true. Debugging this does show that displayCta toggles between true and false.

However what's rendered is purely based on the initial state of displayCta, not the logic that modifies it's state.

Is this down to the lifecycle of the ponent i.e. it looks at the initial state of displayCta, decides whether it's a truthy/falsey does all the rendering and after that the function trackByFn is invoked making no difference to what's rendered?

• javascript
• angular

Share Improve this question Follow asked Jun 14, 2017 at 16:22 rilesterrilester 3511 gold badge11 silver badge44 bronze badges 1

• 2 Don't write track-by functions with side effects. There is no guarantee when it will be called. – user663031 Commented Jun 14, 2017 at 16:24

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

You can get the index in the *ngFor statement and assign it, then use that in the *ngIf.

<div class="flex-card" *ngFor="let thing of things; let i = index; trackBy: trackByFn">
<div class="card" *ngIf="i%3===0">

If this is just a quick example then you should update the actual model to track if it should be displayed or not. Putting the logic in the tracking function is not a good idea as already stated in the ments.

In this case displayCta will be changing quite a bit, and every single div will point to that same value. What you could do is add a field on thing in your trackByFn like so:

trackByFn(index: any, item: any) {
  item.show = (index % 3 === 0);
}

and then check for that in your ngIf

<div class="card" *ngIf="thing.show">

or do what Igor said.