title: Pass event to directive and subscribe to it
body: <p>I have a directive which has an Output of EventEmitter.
  I would like to do something when the subscription of the emitted event returned subscription is completed.</p>
  
  <p>(for example, I would like to do console.log('test') when save() of example.component is completed. - I am aware I can do that in the example.component's save method but I am doing something generic so I need it in the directive).</p>
  
  <pre><code>import { Directive, OnInit, HostListener, Output, EventEmitter } from '@angular/core';
  
  @Directive({
    selector: '[appSingleActiveButton]'
  })
  export class SingleActiveButtonDirective {
    @Output() appSingleActiveButton: EventEmitter&lt;any&gt; = new EventEmitter();
  
    constructor() {}
  
    @HostListener('click', ['$event'])
    private onClick(e: any): void {
      this.appSingleActiveButton.next(e);
      //determine somehow that the referred function's subscription is completed and do something
      // for example what I tried is: this.appSingleActiveButton.subscribe(() =&gt; console.log('do some other stuff'))
    }
  }
  </code></pre>
  
  <p>and I have a component which has an element with that directive and pass a function which returns Subscription.</p>
  
  <p>example.component.ts:</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { Subscription } from 'rxjs/Rx';
  import { Http } from '@angular/http';
  
  @Component({
    selector: 'app-example',
    templateUrl: './example.component.html',
    styleUrls: ['./example.component.scss'],
  })
  export class ExampleComponent {
  
    constructor(private http: Http) {}
  
    public save(index: number): Subscription {
      const requestUrl = 'http://example.com';
      return this.http
      .get(requestUrl)
      .map((response) =&gt; response.json()).subscribe(() =&gt; console.log(`doing some stuff ${index}`));
    }
  }
  </code></pre>
  
  <p>example.component.html</p>
  
  <pre><code>&lt;div *ngFor="let btn of btns; let i = index"&gt;
      &lt;div (appSingleActiveButton)="save(i)"&gt;test directive&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>EDIT</strong>:
  The question is as follows:</p>
  
  <p>How can I determine that the <code>save()</code> is completed (either success or error) inside the directive where I actually call it <code>this.appSingleActiveButton.next(e);</code></p>