title: Angular component: Can I use an Observable instead EventEmitter as @Output() property?
body: <p>[angular 2.4.5]</p>
  
  <p>I tried and it seems to work like an EventEmitter:</p>
  
  <ul>
  <li><p>My component from outside:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;split (visibleTransitionEnd)="log($event)"&gt;&lt;/split&gt;
  </code></pre></li>
  <li><p>Inside the component:</p>
  
  <pre class="lang-js prettyprint-override"><code>@Output() visibleTransitionEnd: Observable&lt;string&gt;
  observer: Observer;
  
  constructor() {
    const myObs = new Observable(observer =&gt; this.observer = observer);
  
    this.visibleTransitionEnd = myObs
      .map(x =&gt; '&gt; ' + x + ' &lt;')
      .debounceTime(20)
      .do(() =&gt; console.log('here we are!'));
  }
  </code></pre></li>
  <li><p>Then I can call inside component:</p>
  
  <pre class="lang-js prettyprint-override"><code>// needed condition because if nobody subscribe 'visibleTransitionEnd' &gt; no observer!
  if(this.observer) this.observer.next('test');
  </code></pre></li>
  </ul>
  
  <p><a href="https://plnkr.co/edit/nRYhoF?p=preview" rel="noreferrer">View this plunker</a></p>
  
  <p>I like this because there's no subscription inside my component.</p>
  
  <p>But is it a bad way to achieve this? What's the risk/wrong?</p>
  
  <p>Is it better to use a <code>Subject</code>?</p>