Hovering on one sentence should highlight matching sentence in another panel in Angular - html

Question

I have 2 different JSON arrays displayed separately using a simple *ngFor loop on the same page. Ex-
json1: [ {
"order": 1,
"similarity": 0.82,
"sentence": "I would like to speak with :name:.",
"matching_sentence": "Hello, I would like to speak with Luke.",
"matching_line": 0
}]
json2: [ {
"order": 0,
"similarity": 0.82,
"sentence": "Hello, I would like to speak with Luke.",
"matching_sentence": "I would like to speak with :name:.",
"matching_line": 1,
"channel": 1,
"timeFrom": 15,
"timeTo": 20
}]
So, order property from json1 matches matching_line property of json2 and vice versa. So, what I need to achieve is that on mouse hover of json1, json2 should also be highlighted and on mouse hover of json2, json1 should also be highlighted.
This code is written in Angular 11 so, any solution whether it is by css or typescript is welcome.

Answer 1

You can achieve it using mouse enter leave events and keeping track of the active class
<div
*ngFor="let item of json1"
[ngClass]="{'highlight': item.order === activeHover}"
(mouseenter)="onHoverChange(item.order)"
(mouseleave)="onHoverChange(null)">
{{item.sentence}}
</div>
<div
*ngFor="let item of json2"
[ngClass]="{'highlight': item.matching_line === activeHover}"
(mouseenter)="onHoverChange(item.matching_line)"
(mouseleave)="onHoverChange(null)">
{{item.sentence}}
</div>
// in ts file
onHoverChange(value: number | null) {
this.activeHover = value;
}
Running sandbox link