title: Angular 2 - Show loading-information when (observableData | async) is not yet resolved
body: <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>