Angular 2+ and debounce

Sharpening the fundamentals

Working with API calls or user input can get messy. The storm of events can bog down your app or bill you extra bucks. Relax! That's where debounce steps in. It assures you that a given action won't process until a specific quiet period elapses. For Angular applications, especially with forms, it's pure gold!

Wrangling events outside Angular's watchtower

Chasing performance? Use the majestic ngZone.runOutsideAngular() to perform certain actions outside Angular's watchful change detection. Your app will feel like it just hit the turbo boost! Here’s how you could tame an observable to track events out of Angular's reach:

import { NgZone } from '@angular/core';
import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

constructor(private zone: NgZone, private elRef: ElementRef) {}

ngAfterViewInit() {
  this.zone.runOutsideAngular(() => {
    fromEvent(this.elRef.nativeElement, 'input')
      .pipe(debounceTime(300)) // Sorry, no espresso served for 300ms!
      .subscribe(event => {
        this.zone.run(() => {
          // Let the party begin! Angular, here we come...
        });
      });
  });
}


Triggering change detection... manually!

Sometimes, you need to manually fire up Angular's change detection to dodge unreasonable performance costs. Get the ChangeDetectorRef in the mix and call detectChanges() whenever you fancy:

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

// Some secret corner in your component
this.cdr.detectChanges(); // Poke Angular! It's time to CHECK!


But if you want to sound the change detection gong for the whole app, reach for ApplicationRef.tick(). But be warned, using it judiciously is the Jedi way. Overuse may lure you to the dark side (read: performance issues).

Encapsulating the debounce essence

To ensure reusability, consider bottle up the debounce logic in a directive or service. A directive is especially handy for template-driven forms or when you wish to attach debouncing charm directly to an HTML element:

import { Directive, ElementRef, OnInit, OnDestroy, Output, EventEmitter } from '@angular/core';
import { fromEvent } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

@Directive({
  selector: '[appDebounceClick]'
})
export class DebounceClickDirective implements OnInit, OnDestroy {
  @Output() debounceClick = new EventEmitter();
  private clickObservable$;

  constructor(private elementRef: ElementRef) {}

  ngOnInit() {
    this.clickObservable$ = fromEvent(this.elementRef.nativeElement, 'click')
      .pipe(debounceTime(300)) // Chill, debounce has got it covered!
      .subscribe(e => this.debounceClick.emit(e));
  }

  ngOnDestroy() {
    this.clickObservable$.unsubscribe(); // It was fun while it lasted!
  }
}


Stick the [appDebounceClick] directive to any element, and voilà! You've just debounced without cluttering your components with repetitious code.

Remember, unsubscribing from observables is like clearing up after a party. Your cleaning (or ngOnDestroy) routine should include unsubscribing to avoid memory hangovers.

Bonuses and challenges

Debouncing can be a powerful weapon, but wield it with care. Pair it with throttling when you need to assure that an action gets processed at least once within a set interval. Here's a simple trick to implement throttling using RxJS:

import { throttleTime } from 'rxjs/operators';

// And now: throttling!
inputControl.valueChanges
  .pipe(throttleTime(300))
  .subscribe(throttledValue => {
    // The throttled event is all yours!
  });


When you deal with hasty strings of identical values, reach out for distinctUntilChanged. This operator blocks back-to-back emissions of same values and can be a great teammate with debouncing:

inputControl.valueChanges
  .pipe(debounceTime(300), distinctUntilChanged())
  .subscribe(value => {
    // Interact with the transformed, distinct, and debounced value
  });


Mastering manual control of change detections, boosting performance with ngZone, and understanding the expanse of available RxJS operators make you a formidable handler of complicated data flows in Angular.