title: Angular 4 async with loading and display when empty
body: <p>I have an Angular component that gets a service <code>CatalogService</code>injected:</p>
  <pre class="lang-js prettyprint-override"><code>export class CatalogListComponent implements OnInit {
    catalog$: Observable&lt;MovieResponseItem[]&gt;;
    constructor(private catalogService: CatalogService) {}
    ngOnInit() {
      this.catalog$ = this.catalogService.userCatalog;
    }
  }
  </code></pre>
  <p>This service returns an <code>Observable&lt;MovieResponseItem[]&gt;</code> on property <code>userCatalog</code>:</p>
  <pre class="lang-js prettyprint-override"><code>@Injectable()
  export class CatalogService {
    get userCatalog(): Observable&lt;MovieResponseItem[]&gt; {
      return this._userCatalogSubject.asObservable();
    }
  }
  </code></pre>
  <p>The <code>MovieResponseItem</code>is just a simple interface:</p>
  <pre class="lang-js prettyprint-override"><code>export interface MovieResponseItem {
    title: string;
  }
  </code></pre>
  <p>Now I want to iterate the items and display a loading animation while the catalog queries the underlying service for data (that takes some time) - this works. This is the template used:</p>
  <pre class="lang-xml prettyprint-override"><code>&lt;div *ngIf=&quot;(catalog$ | async)?.length &gt; 0; else loading&quot;&gt;
     &lt;ng-container *ngFor=&quot;let item of catalog$ | async&quot;&gt;
       &lt;div&gt;{{item.title}}&lt;/div&gt;
     &lt;ng-container&gt;
  &lt;/div&gt;
  &lt;ng-template #loading&gt;loading animation...&lt;/ng-template&gt;
  </code></pre>
  <p>This obviously displays the #loading template while the async is awaiting data. If the observable returns data, it iterates over the catalog values.</p>
  <p>But now I want to separate this into this behaviour:</p>
  <ul>
  <li>while we await data, display the loading animation</li>
  <li>if we have a response from the service and the returned list is empty, show an information text (like &quot;your catalog is empty&quot;) and do not iterate (as there is no data)</li>
  <li>if we have a response from the service and the returned list has values, iterate the items (as in current state)</li>
  </ul>
  <p>How can I achieve this?</p>