How To Apply Css Dynamically On Selected Items Only [angular]

I'm learning Angular. I've created a custom month-picker from the scratch. It selects a range of months, no dates and no weeks. I wanted to highlight the range of months that'd bee

Solution 1:

You can add isSelected key in row array. Like this :

matrix: any = Array.from(
    { length: Math.ceil(this.arr.length / this.n) },
    (_, i) => i
  ).map(i =>this.arr.slice(i * this.n, i * this.n + this.n).map(x => ({
      monthName: x,
      isSelected: false
    }))
  );

than use the isSelected key in html like this :

<div *ngFor="let row of matrix"class="my-table"><span *ngFor="let x of row"><spanclass="month-name" (click)="onClick(x); x.isSelected = !x.isSelected" [ngClass]="{'extraStyle' : x.isSelected }">
        {{ x.monthName }}
      </span></span></div>