Angular2 - Show a loading message, and hide it once the async call finishes

Question

I am willing to show/hide a Loading message once the async call from a REST API finishes, it hides the Loading message and show the fetched content instead.

I don't know how to achieve that in Angular2, but in JavaScript, something like this is done:

 <h2 id="message">Loading....</h2>
 <script>
 $(document).ready(function(){
  $('#message').hide();
   //Then Show the newly fetched content
  }
 </script>

Answer 1

I believe you are using an ngFor to display the data fetched.

This should work for you:

<div *ngIf="!content">Loading...</div>
<div #ngFor="#content of content"></div>
<div *ngIf="content">Now the fetched content appears here!</div>

Answer 2

<div *ngIf="!content">Loading...</div>
<div *ngIf="content"> TODO display the content here </div>