I am attempting to configure this Angular/Html/JS so that the elements begin to have a blue background when counter >= 5

<p
  *ngFor="let log of clickLog"
  [ngStyle]="{backgroundColor: counter >= 5 ? 'blue' : 'transparent'}">
  {{ log }}
</p>

when the counter is <= 4, all elements have no styling, as intended. The problem is: once the counter hits 5, ALL elements take on the blue background. My intention is that only elements 5+ have the background.

Edit: I am aware that I can use an index value from the ngFor-loop as an alternative solution. I am specifically curious why this approach does not work.

I am attempting to configure this Angular/Html/JS so that the elements begin to have a blue background when counter >= 5

<p
  *ngFor="let log of clickLog"
  [ngStyle]="{backgroundColor: counter >= 5 ? 'blue' : 'transparent'}">
  {{ log }}
</p>

when the counter is <= 4, all elements have no styling, as intended. The problem is: once the counter hits 5, ALL elements take on the blue background. My intention is that only elements 5+ have the background.

Edit: I am aware that I can use an index value from the ngFor-loop as an alternative solution. I am specifically curious why this approach does not work.

• javascript
• html
• angular
• ngfor
• ng-style

• See if it works for you: stackblitz./edit/angular-issue-repro2-kjjdkn – developer033 Commented Aug 4, 2019 at 3:03
• 2 this.counter is not part of your this.clicklog, which you're looping. So this.counter is true for all the items in this.clicklog getting applied that style. – Chaitanya Commented Aug 4, 2019 at 3:03
• Thank you @chaitanya. This is what I was looking for. While I had found alternative methods, like using an index as suggested in one of the answers below, my goal was to run the condition based on a value in my typescript file. – Chris Phillips Commented Aug 4, 2019 at 3:26

3 Answers 3

The binding of counter inside [ngStyle] is called property binding which mean Angular will observe and evaluate all [ngStyle] in your <p> tag again and again whenever it dectects changes from counter value.(your misunderstanding is that counter value is evaluated and scoped in each loop)

That why when counter bee higher than 5, all [ngStyle] is evaluated again and have the style backgroundColor:blue. Therefore currently there is no way to archive what you want with only one property counter from your TS file.

I would suggest using *ngFor 's index which it's value is evaluated and scoped in each loop:

<p
  *ngFor="let log of clickLog; let indexOfElement = index;"
  [ngStyle]="{'background-color': (indexOfElement >= 4) ? 'blue' : ''}">
  {{ log }}
</p>

Maybe this?

<p
  *ngFor="let log of clickLog; let counter = index"
  [ngStyle]="{backgroundColor: counter >=5 ? 'blue' : 'transparent'}">
  {{ log }}
</p>

Alternatively you could do it with CSS if it was always 5 with nth-child(n+5)

Once give a try. I didn't tried, but I think it'll work.

<p *ngFor="let log of clickLog; let i=index;" 
  [ngStyle]="{backgroundColor: (counter >=5 && i>=4) ?  'blue':'transparent'}">
  {{ log }}
</p>