How highlight a div on click in angular

Question

I am having div called booking-list,which i am using to display the booking timings.Here on mouse hover the background-color of the div is changing as shown in below image.

Here my issue is,suppose if i click on the first timings(i,e september1) that div's background as to be changed and that background color should to be constant until i click next timings.something like this below image.I got resources for list component but i am unable to apply it for div

Here is the stackblitz link.

Answer 1

Ok so this is pretty easy to do with ngClass. You make a highlight class in your css. What this will do is it will check if the condition is true and apply the css.

Then you do in the ngFor:

*ngFor="let item of item; let i = index;" (click)="setRow(i)" [ngClass]="{'highlight': selectedIndex === i}"

And then in your component:

public setRow(_index: number) { this.selectedIndex = _index;

In your css you can do something like:

.highlight{ background-color: green }

EDIT

For multi-selection you can do:

[ngClass]="{'highlight': selectedIndexs.indexOf(i)}

public setRow(_index: number) { if (this.selectedIndexs.indexOf(_index) === -1) { this.selectedIndexs.push(_index); } else { let index = this.selectedIndexs.indexOf(_index); this.selectedIndexs.splice(index, 1); }