title: Angular 4 loading screen: add item to html and hide it after 5 seconds
body: <p>I have a loading screen that takes about 15-30 seconds depending on the data that's loaded. It loads about 50 items and displays on the page: </p>
  
  <p><code>Loading item x</code></p>
  
  <p>It uses an observable/subscription for each data call made to the DB.  Upon receiving the data, the subscription fires off and adds it to an HTML string:</p>
  
  <pre><code>sync() {
      this.syncStatus = "Starting sync"
      this.syncService.sync().subscribe((status: string) =&gt; {
          this.syncStatus += "&lt;div&gt;" + status + '&lt;/div&gt;';
      }, (error: string) =&gt; {
          console.log(error);
      }, () =&gt; {
          this.Redirect();
      });
  }
  </code></pre>
  
  <p><code>&lt;div class="description"&gt;
     &lt;span [innerHTML]="syncStatus"&gt;&lt;/span&gt;
  &lt;/div&gt;</code></p>
  
  <p>As of now, it simply shows the list and it cuts off the list display because it gets so long (again, 50+ items, sometimes hundreds). I was wondering, how do I show each individual item to the page for 5s then hide it?</p>