3

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.

King-Wizard
  • 15,628
  • 6
  • 82
  • 76
Chris Phillips
  • 1,997
  • 2
  • 19
  • 34
  • See if it works for you: https://stackblitz.com/edit/angular-issue-repro2-kjjdkn – developer033 Aug 04 '19 at 03: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 Aug 04 '19 at 03: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 Aug 04 '19 at 03:26

3 Answers3

5

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 become 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>
Ethan Vu
  • 2,911
  • 9
  • 25
  • he needs to check the counter value and he needs to give style to the elements having index greater than counter. – Chaitanya Aug 04 '19 at 06:35
  • As i said, there no way to control it with only one propery from TS using `[ngStyle]`, i dont see any reason to not use index since the logic is to change style of items that have length higher than 5 – Ethan Vu Aug 04 '19 at 06:50
  • Even I given answer using index. Along with index he needs to check `counter` value which is not part of `clickLog` – Chaitanya Aug 04 '19 at 06:55
  • As I see the ideal he want is to give the `couter` inside each `[ngStyle]` a scoped value that evaluate only one time which is impossible due to Angular data binding mechanism, you dont need include `counter` for the logic he want if `index` is used – Ethan Vu Aug 04 '19 at 07:00
1

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)

Liam Clarke
  • 243
  • 4
  • 13
1

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>
Martin Choraine
  • 2,296
  • 3
  • 20
  • 37
Chaitanya
  • 847
  • 1
  • 8
  • 15