typescript 38 lines · 7 steps

A debounced resize directive in Angular

A standalone Angular directive that debounces window resize events and emits the element's rect while keeping change detection quiet.

Explained by highlit
Angular Advanced debounce change-detection host-bindings directives performance
1import { Directive, ElementRef, EventEmitter, inject, NgZone, OnDestroy, Output } from '@angular/core';
2 
3@Directive({
4 selector: '[appResizeDebounced]',
5 standalone: true,
6 host: {
7 '(window:resize)': 'onResize()',
8 },
9})
10export class ResizeDebouncedDirective implements OnDestroy {
11 private readonly host = inject(ElementRef<HTMLElement>);
12 private readonly zone = inject(NgZone);
13 
14 @Output('appResizeDebounced') readonly resized = new EventEmitter<DOMRectReadOnly>();
15 
16 private timerId: ReturnType<typeof setTimeout> | null = null;
17 private readonly delay = 200;
18 
19 onResize(): void {
20 if (this.timerId !== null) {
21 clearTimeout(this.timerId);
22 }
23 
24 this.zone.runOutsideAngular(() => {
25 this.timerId = setTimeout(() => {
26 const rect = this.host.nativeElement.getBoundingClientRect();
27 this.zone.run(() => this.resized.emit(rect));
28 this.timerId = null;
29 }, this.delay);
30 });
31 }
32 
33 ngOnDestroy(): void {
34 if (this.timerId !== null) {
35 clearTimeout(this.timerId);
36 }
37 }
38}
01 / 01
STEP 01

Walkthrough

Space play ←→ step click any line
Three takeaways
  1. 1Debouncing collapses a flood of resize events into one action after activity settles.
  2. 2Running timers outside NgZone prevents each tick from triggering wasteful change detection.
  3. 3Re-entering the zone with zone.run only when emitting keeps Angular updates precise.

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
go 
func (w *Watcher) resetDebounce(d time.Duration) {
	if !w.timer.Stop() {
		select {
		case <-w.timer.C:

Debouncing a stream of events in Go

debounce timers channels
Advanced 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

Share this explainer

Here's the card — post it anywhere.

A debounced resize directive in Angular — share card
Made with highlit — turn any snippet into a walkthrough like this in about a minute.
Explain your code