title: How to use Observable with Async pipe inside Angular2 click function
body: <p>Situation: I am using FirebaseObjectObservable to populate my Ionic 2 (rc0) template. Template code:</p>
  
  <pre><code> &lt;p&gt;{{(course | async)?.description}}&lt;/p&gt;
   &lt;button ion-button dark full large (click)="openDeckOnBrowser(course.deckUrl)"&gt;
    &lt;ion-icon name='cloud-download'&gt;&lt;/ion-icon&gt;
    &lt;div&gt;View Deck&lt;/div&gt;
   &lt;/button&gt;
  </code></pre>
  
  <p>The TS file is</p>
  
  <pre><code>  this.course = this.af.database.object('/bbwLocations/courses/' + courseId); 
  </code></pre>
  
  <p>this.course is a Firebase Object Observable. The problem is, this part won't work: (click)="openDeckOnBrowser(course.deckUrl). As the course.deckUrl is empty. I can not pass the value to the function. </p>
  
  <p>Tho only hacky way I found to work around so far is this: </p>
  
  <pre><code> &lt;button id="{{(course | async)?.deckUrl}}" ion-button dark full large (click)="openDeckOnBrowser($event)"&gt;
    &lt;ion-icon name='cloud-download'&gt;&lt;/ion-icon&gt;
    &lt;div id="{{(course | async)?.deckUrl}}"&gt;View Deck&lt;/div&gt;
  &lt;/button&gt;
  </code></pre>
  
  <p>And on the click event: </p>
  
  <pre><code>  openDeckOnBrowser(event):void {
      console.log(event);
      let target = event.target || event.srcElement || event.currentTarget;
      let idAttr = target.attributes.id;
      let url = idAttr.nodeValue;
      console.log (url);
     }
  </code></pre>
  
  <p>But any official and easier way to approach this?</p>