title: how do I debounce the @Output of an inner component?
body: <p>I have a component that wraps another component <code>&lt;inner-component&gt;</code> and binds to the <code>InnerComponent.innerChanged()</code> custom event. I want to bubble up using an <code>@output</code> property, but I also want to debounce the output.</p>
  
  <p>How do I use <code>RxJS</code> <code>.debounce()</code> or <code>.debounceTime()</code> to do this?</p>
  
  <p>Something like this:</p>
  
  <pre><code>import {Component, Output, EventEmitter} from 'angular2/core';
  import 'rxjs/add/operator/debounce';
  import 'rxjs/add/operator/debounceTime';
  
  @Component({
    selector: 'debounced-component',
    template: `
      &lt;div&gt;
        &lt;h1&gt;Debounced Outer Component&lt;/h1&gt;
        // export class InnerComponent{
        //   @Output() innerChanged: new EventEmitter&lt;string&gt;();
        //   onKeyUp(value){
        //     this.innerChanged.emit(value);
        //   }
        // }
        &lt;input #inner type="text" (innerChange)="onInnerChange(inner.value)"&gt;
      &lt;/div&gt;
    `
  })
  export class DebouncedComponent {
    @Output() outerValueChanged: new EventEmitter&lt;string&gt;();
  
    constructor() {}
  
    onInnerChange(value) {
      this.outerValuedChanged.emit(value); // I want to debounce() this.
    }
  }
  </code></pre>