Angular 2 - Show loading-information when (observableData | async) is not yet resolved
<p>just as the title says, I want to embrace the power of rxjs Observables.</p>

<p>What I do now: </p>

<pre><code>// dataview.html
&lt;div *ngIf="isLoading"&gt;Loading data...div&gt;
&lt;ul *ngIf="!isLoading"&gt;
    &lt;li *ngFor="let d of data"&gt;{{ d.value }}&lt;/li&gt;
&lt;/ul&gt;


// dataview.ts

data: any[] = [];
isLoading: boolean = false;

getData() {

this.isLoading = true;
this._api.getData().subscribe(
        data =&gt; {
            this.data = data;
            this.isLoading = false;
        },
        error =&gt; {
            this.error = error;
            this.isLoading = false;
        });
}
</code></pre>

<p>What I want to do:</p>

<p><strong>1. Use <code>async</code> pipe in my template</strong></p>

<ol start="2">
<li><p>Make <code>data</code> an Observable array</p></li>
<li><p>Still display loading information for the user</p></li>
</ol>

<p>I'm a big fan of clean code, so how can this be done nicely using rxjs and Angular 2?</p>