title: How to pass a value inside an observable to (click) handler in Angular2
body: <p>I try to learn observable programming with Angular 2 BUT I don't get one important point - how to pass in the value that is in an observable in the (click) event in the template level (without subscribing the observable in the TS file and turn the observable value into member variable).</p>
  
  <p>As lots of Firebase experts suggest this "Wherever possible, try to use | async in angular2 and prevent manual subscriptions!" - reason for not wanting to manually subscribe to task$ and turn it into an array. </p>
  
  <p>For example: </p>
  
  <p>I have this in my TS file of component: </p>
  
  <pre><code>task$: Observable&lt;Task&gt;;
  
  this.task$ = this.tasksService.findTaskById(taskId);
  </code></pre>
  
  <p>In my service, this is the code to call firebase with AngularFire which return an observable: </p>
  
  <pre><code>import {Task} from "../model/task";
  constructor(private db:AngularFireDatabase, @Inject(FirebaseRef) fb) {
     this.sdkDb = fb.database().ref();
  }
  
  findTaskById(id:string):Observable&lt;Task&gt; {
  
    return this.db.object('tasks/' + id).map(task =&gt; Task.fromJson(task));
  
  }
  </code></pre>
  
  <p>In my template, I can use the value without problem in Angular2 with async pipe like so: </p>
  
  <pre><code>&lt;md-card-title&gt;{{(task$ | async)?.title}}&lt;/md-card-title&gt;
  </code></pre>
  
  <p>But then I have a button that need the $id value inside this task$ like so: </p>
  
  <pre><code>&lt;button md-button *ngIf="(authInfo$ | async)?.isLoggedIn()" (click)="deleteTask((task$ | async)?.$key)"&gt;Delete&lt;/button&gt;
  </code></pre>
  
  <p>This won't work as click does not allow pipe inside the expression... And I DO NOT want to subscribe to task$ and turn it into member variable (best practises to keep it task$ for obserable style RXJS programming?!)</p>
  
  <p>So how do I get the $key value as it is not there initially and I can not use async pipe!?</p>