Angular How to change related components style when hovering an element that is not a direct...

I'm new to Angular and I'm not sure if using rxjs is the best way to achieve this. Imagine that you have some text, each word is a component and unfortunately these components are not all direct siblings. A word or group of words can have an annotation component like a number above the text, just like in books. When hovering the annotation I need to change the style of its related word, other than itself of course. Also if I hover words, the annotation should change its style, again and the words themselves too.

I tried with a common service and using subjects etc, but I end up having that all word and all annotation component instances listen to all the subject.next calls and each component instance need to filter the incoming event by some id. When there is a lot of components, it starts becoming slow.

Should one use input parameters to do this via state management on a parent component instead?

Sorry for not being able to provide some code example. This is simplified quite a bit, in the word.component:

onHover() {
this.hoverService.hoveredWord$.next(this.word.id);
}


In the annotation.component:

shouldHighlight$ = combineLatest([
this.onAnnotationHover$, // this is called inside this component with this.onAnnotationHover.next()
this.hoverService.hoveredWord$,
]).pipe(
map(([hover, word]) => hover || this.annotationData.includes(word));


And viceversa for hovering annotations and then observing on the word component. I guess what I'm asking rather than specific code, if there is a better way to do this.

Continue reading...