michael michael - 1 month ago 6
Javascript Question

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

I have a component that wraps another component

<inner-component>
and binds to the
InnerComponent.innerChanged()
custom event. I want to bubble up using an
@output
property, but I also want to debounce the output.

How do I use
RxJS
.debounce()
or
.debounceTime()
to do this?

Something like this:

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

@Component({
selector: 'debounced-component',
template: `
<div>
<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)">
</div>
`
})
export class DebouncedComponent {
@Output() outerValueChanged: new EventEmitter<string>();

constructor() {}

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

Answer

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
      debouncer
        .debounceTime(100)
        .subscribe((val) => this.outerValuedChanged.emit(value));
  }

  onInnerChange(value) {
    // send every value from the inner to the subject
    debouncer.next(value);
  }
}

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.

Comments