Adding a class on elements created with a loop past a certain index

Question

I'm trying to use ngClass to add a class on any span elements after the fourth one is added to the DOM (happens via a button click that increments a counter variable and also toggles the visibility of a paragraph), but I don't know how to make this to where any of the first four spans do not also get this class added once the fifth one is reached. I feel like this is easy to accomplish, but I'm stuck.

I tried adding an index to the *ngFor and then adding the class based on the index but that produced the same result.

Template:

<p *ngFor="let click of buttonClicks;">
    <span [ngClass]="{ 'white': counter > 4 }">{{ [click] }}</span>
</p>

<button (click)="displayDetails()">Display Details</button>

<p *ngIf="detailsVisible">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus quasi id, molestiae doloremque alias non adipisci placeat corrupti commodi minus voluptas debitis eaque iure obcaecati minima neque et molestias atque.</p>

Component:

export class AppComponent {

    detailsVisible: boolean = false;

    buttonClicks: Array<number> = [];
    counter: number = 0;

    displayDetails() {
      this.detailsVisible = !this.detailsVisible;
      this.buttonClicks.push(this.counter);
      this.counter++; 
    }
}

JB Nizet · Accepted Answer · 2018-12-28 18:38:16Z

2

You don't need any counter. You need the index of each span:

<p *ngFor="let click of buttonClicks; index as i">
  <span [ngClass]="{ 'white': i > 4 }">{{ [click] }}</span>
</p>

Or, since the value of click is the index, you can just use its value:

<p *ngFor="let click of buttonClicks">
  <span [ngClass]="{ 'white': click > 4 }">{{ [click] }}</span>
</p>

answered Dec 28, 2018 at 18:38

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tim Over a year ago

Weird. I swear I tried exactly this using an index value but it was producing the same result. Maybe the page hadn't updated for some reason. But thanks so much for the reply, I'll mark this as correct once I'm able to.

Collectives™ on Stack Overflow

Adding a class on elements created with a loop past a certain index

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related