typescript 59 lines · 8 steps

Throttling pointer events with NgZone in Angular

An Angular directive tracks mouse movement outside change detection and emits coalesced points once per animation frame.

Explained by highlit

Angular Advanced change-detection requestanimationframe event-throttling directives performance

1import { Directive, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, Output } from '@angular/core';
2 
3interface Point {
x: number;
y: number;
6}
7 
8@Directive({
selector: '[appPointerTrail]',
standalone: true,
11})
12export class PointerTrailDirective implements OnInit, OnDestroy {
@Output() trailPoint = new EventEmitter<Point>();
14 
private removeListener?: () => void;
private rafId: number | null = null;
private pending: Point | null = null;
18 
constructor(
  private readonly host: ElementRef<HTMLElement>,
  private readonly zone: NgZone,
) {}
23 
ngOnInit(): void {
  this.zone.runOutsideAngular(() => {
    const el = this.host.nativeElement;
    const onMove = (event: MouseEvent) => {
      const rect = el.getBoundingClientRect();
      this.pending = { x: event.clientX - rect.left, y: event.clientY - rect.top };
      this.scheduleFlush();
    };
32 
    el.addEventListener('mousemove', onMove, { passive: true });
    this.removeListener = () => el.removeEventListener('mousemove', onMove);
  });
}
37 
private scheduleFlush(): void {
  if (this.rafId !== null) {
    return;
  }
  this.rafId = requestAnimationFrame(() => {
    this.rafId = null;
    const point = this.pending;
    if (!point) {
      return;
    }
    this.pending = null;
    this.zone.run(() => this.trailPoint.emit(point));
  });
}
52 
ngOnDestroy(): void {
  this.removeListener?.();
  if (this.rafId !== null) {
    cancelAnimationFrame(this.rafId);
  }
}
59}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Running high-frequency listeners outside NgZone avoids triggering change detection on every event.
2Coalescing updates with requestAnimationFrame caps work to one emission per frame no matter how fast events fire.
3Directives that attach native listeners must remove them and cancel pending frames on destroy to avoid leaks.

Related explainers

typescript

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
import localeFrExtra from '@angular/common/locales/extra/fr';
import localeDe from '@angular/common/locales/de';

Locale-aware bootstrapping in Angular

i18n localization dependency-injection

Intermediate 8 steps

typescript

import { Module } from '@nestjs/common';
import { ConfigModule } from '@nestjs/config';
import * as Joi from 'joi';

Validating env config at boot in NestJS

configuration schema-validation environment-variables

Intermediate 8 steps

typescript

import { Inject, Injectable, Logger } from '@nestjs/common';
import { CACHE_MANAGER } from '@nestjs/cache-manager';
import { Cache } from 'cache-manager';
import { InjectRepository } from '@nestjs/typeorm';

A cache-aside country lookup in NestJS

cache-aside dependency-injection batch-lookup

Intermediate 8 steps

typescript

import { Injectable, effect, signal, computed } from '@angular/core';
 
interface Preferences {
  theme: 'light' | 'dark';

A signal-based preferences store in Angular

signals state-management persistence

Intermediate 7 steps

typescript

import { useEffect, useState } from "react";
 
interface Section {
  id: string;

Building a scroll-spy hook in React

custom-hooks intersectionobserver dom-observation

Intermediate 8 steps

typescript

import { Injectable, Scope, Inject, NotFoundException } from '@nestjs/common';
import { REQUEST } from '@nestjs/core';
import { Request } from 'express';
import { DataSource } from 'typeorm';