How to use Observable with Async pipe inside Angular2 click function
<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>