Imagine having a series of 10 divs numbered from 1 to 10, and then selecting div 2 and div 7. The goal is to highlight all the divs between these two selected divs once the ending div is chosen after the starting div (starting div=2 and ending div=7).
Currently, I am able to select any 2 divs and have them highlighted using CSS. However, now I want to enhance this functionality to include highlighting all the time slots between the 2 selected terminals.
<div *ngFor="let todayDate of dates; let z = index" class="dateBox">
<div style="margin-bottom: 10px;">{{fullDate[z] | date: 'fullDate'}}</div>
<div class="" *ngFor="let time of ScheduleTime; let i = index">
<div *ngIf="todayDate == time.date">
<div class="timeSlots" [ngClass]="{'startClass': time.hours == st.sh && time.minutes == st.sm && startDate == time.date, 'endClass': time.hours == et.eh && time.minutes == et.em && startDate == time.date}" (click)='timeSelector(time,i,todayDate)'>
{{time.hours}}:{{time.minutes | zero}}
</div>
</div>
</div
</div>
I already have the indexes of both selected divs. Is there a way to leverage this information to achieve what I am looking for?