title: Better way to convert angular animation callback into observable?
body: <p>I have an angular animation, that has a callback when it completes:</p>
  
  <pre><code>&lt;section [@routerTransition]="getAnimation()" (@routerTransition.done)="transitionEnd($event)"&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>I'm currently handling that event, and emitting from an EventEmitter:</p>
  
  <pre><code>private transitionCompleted$: EventEmitter&lt;null&gt; = new EventEmitter();
  
  transitionEnd() {
      this.transitionCompleted$.emit();
  }
  </code></pre>
  
  <p><code>transitionCompleted$</code> is an observable (<code>EventEmitter</code> is a subclass of observable) that emits when the transition completes.</p>
  
  <h2>Is there a better/more straightforward way to convert that callback into an observable?</h2>
  
  <p>What I don't like is having to handle that event, only to create a new event.</p>
  
  <p>Something like <code>this.transitionCompleted$ = @ViewChild('@routerTransition').done</code> ...</p>