michael michael - 12 days ago 4x
Javascript Question

how do I debounce the @Output of an inner component?

I have a component that wraps another component

and binds to the
custom event. I want to bubble up using an
property, but I also want to debounce the output.

How do I use
to do this?

Something like this:

import {Component, Output, EventEmitter} from 'angular2/core';
import 'rxjs/add/operator/debounce';
import 'rxjs/add/operator/debounceTime';

selector: 'debounced-component',
template: `
<h1>Debounced Outer Component</h1>
// export class InnerComponent{
// @Output() innerChanged: new EventEmitter<string>();
// onKeyUp(value){
// this.innerChanged.emit(value);
// }
// }
<input #inner type="text" (innerChange)="onInnerChange(inner.value)">
export class DebouncedComponent {
@Output() outerValueChanged: new EventEmitter<string>();

constructor() {}

onInnerChange(value) {
this.outerValuedChanged.emit(value); // I want to debounce() this.


To debounce values you could use a Subject. A subject is both an observable and a observer. This means you can treat it as an observable and pass values to it as well.

You could leverage this to pass the new values from the inner-component to it and debounce it this way.

export class DebouncedComponent {
  @Output() outerValueChanged: new EventEmitter<string>();
  const debouncer: Subject = new Subject();

  constructor() {
      // you listen to values here which are debounced
      // on every value, you call the outer component
        .subscribe((val) => this.outerValuedChanged.emit(value));

  onInnerChange(value) {
    // send every value from the inner to the subject

This is untested pseudo-code. You can see a working example of the concept here (http://jsbin.com/bexiqeq/15/edit?js,console). It's without angular but the concept remains the same.