My Angular template needs to display a rapidly changing value, driven by mousemove events, which I am retrieving from my NgRx Store. The Store appears to be keeping up with the data changes but the resulting value displayed in the template lags behind and appears to only refresh when the mouse stops moving.

A component with approximately 300 DOM elements detects mousemove events and handles them outside of ngZone as follows:

  ngAfterViewInit() {

    const eventElement = this.eventDiv.nativeElement;

    this.move$ = fromEvent(eventElement, 'mousemove');
    this.leave$ = fromEvent(eventElement, 'mouseleave');

    /*
     * We are going to detect mouse move events outside of
     * Angular's Zone to prevent Change Detection every time
     * a mouse move event is fired.
     */
    this.ngZone.runOutsideAngular(() => {

      // Check we have a move$ and leave$ objects.
      if (this.move$ && this.leave$) {

        // Configure moveSubscription.
        this.moveSubscription = this.move$.pipe(
          takeUntil(this.leave$),
          repeat()).subscribe((e: MouseEvent) => {
            e.stopPropagation();
            this.mouseMove.emit(e);

          });
      };

    });

A parent component handles the resulting mouseMove event and still outside ngZone performs some Calculations to ascertain which element the mouse is over. Once the result has been calculated a function is called, passing in the calculated result, and within this function I dispatch an NgRx Action within ngZone using this.ngZone.run(() => { dispatch Action here }.

I can see that the Store reacts quickly to the changing data. I then have a separate component responsible for displaying the result. An Observable listens to the Selector's changing values and displays the result using interpolation.

Curiously I added an RxJs tap into the Observable declaration as follows:

  public mouseoverLocationName$: Observable<string | null>;

  constructor(
    public store: Store<fromPilecapReducers.PilecapState>
  ) {

    this.mouseoverLocationName$ = this.store.pipe(
      select(fromPilecapSelectors.PilecapMapSelectors.selectMouseoverLocationName),
      tap(locationName => {
        console.log(`mouseoverLocation$: ${locationName}`);
      })
    );

  }

The console logs out the locationName value nice and quickly. However the html element displaying the string is very slow and, as I said earlier, only appears to update when the mouse stops moving. The template code is as follows:

<h2>{{mouseoverLocationName$ | async}}</h2>

I've got to the point now where I can't see the wood for the trees! any suggestions or guidance very welcome.