koningdavid koningdavid - 1 year ago 1278
Javascript Question

Angular2 and debounce

In AngularJS I can debounce a model by using ng-model options.

ng-model-options="{ debounce: 1000 }"

How can I debounce a model in Angular2? I tried to search for debounce in the docs but I couldn't find anything.


A solution would be to write my own debounce function, for example:

import {Component, Template, bootstrap} from 'angular2/angular2';

// Annotation section
selector: 'my-app'
url: 'app.html'
// Component controller
class MyAppComponent {
constructor() {
this.firstName = 'Name';

changed($event, el){
console.log("changes", this.name, el.value);
this.name = el.value;

firstNameChanged($event, first){
if (this.timeoutId) window.clearTimeout(this.timeoutID);
this.timeoutID = window.setTimeout(() => {
this.firstName = first.value;
}, 250)


And my html

<input type=text [value]="firstName" #first (keyup)="firstNameChanged($event, first)">

But I'm looking for a build in function, is there one in Angular2?

Answer Source

@bertrandg's answer is good (+1), but we don't need distinctUntilChanged() or switchMap() here. And since I didn't like having to go read a blog post to figure out how to get a working example, here's a working example so others don't have to do the same:

import {Component} from '@angular/core';
import {Control} from '@angular/common'; 
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/throttleTime';
import 'rxjs/add/observable/fromEvent';

  selector: 'my-app',
  template: `<input type=text [value]="firstName" [ngFormControl]="firstNameControl">
export class AppComponent {
  firstName = 'Name';
  constructor() { 
    this.firstNameControl = new Control();
  ngOnInit() {
      .subscribe(newValue => this.firstName = newValue);

    Observable.fromEvent(window, 'resize')
      .subscribe(e => {
        console.log('resize event', e);
        this.firstName += '*';


The code also includes an example of how to throttle window resize events, as asked by @albanx in a comment below. Note that Angular change detection will now run for each resize event, even if the event is throttled. To avoid that, see the technique presented in this answer.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download