Angular 9 using mat-table multiTemplateDataRows and want to hover/mouseover both rows at the same time

Question

I am new to angular and am using mat-table with multiTemplateDataRows. So, each element from my DataSource is printed out on two rows of the table. Both rows are always visible. My problem is when I mouse over row 1, only row 1 is highlighted. And, if I mouse over row 2, only row 2 is highlighted. But, I need both rows to highlight at the same time. Is there a way to group the two rows for hovering/highlighting purposes?

Here is how I am defining my rows:

<tr mat-header-row *matHeader="displayedColumns; sticky:true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" class="first-row" (click)="eventPopup(row)"></tr>
<tr mat-row *matRowDef="let row; columns: secondRowColumns;" class="second-row" (click)="eventPopup(row)"></tr>

Thanks for any and all help!

Answer 1

I finally got it to work!

The HTML is:

<tr mat-header-row *matHeader="firstLineColumns; sticky:true"></tr>
<tr mat-row *matRowDef="let row; columns: firstLineColumns;" class="first-line" [ngClass] = "{'highlight': selectedId == row.eventId}" (mouseenter)="changeColor(row,true)" (mouseleave)="changeColor(row,false)" (click)="eventPopup(row)"></tr>
<tr mat-row *matRowDef="let row; columns: secondLineColumns;" class="second-line" [ngClass] = "{'highlight': selectedId == row.eventId}" (mouseenter)="changeColor(row,true)" (mouseleave)="changeColor(row,false)"  (click)="eventPopup(row)"></tr>

Css:

.highlight {
background-color: yellow;
}

Javascript:

selectedId: string = null;

changeColor(row: Event, hover: true) {
  if (hover === true) {
    this.selectedId = row.eventId;
  }
  else {
    this.selectedId = null;
  }
}