[Angular] Show a loading indicator in Angular using *ngIf/else, the as keyword and the async pipe

The network may be unreliable and loading data may take time. Thus it is important to give the user some feedback about what's going on as fast as possible. In this lesson we learn how to leverage the else block of the *ngIf directive to show a simple loading indicator.

 

    <div *ngIf="buttonClicked">
      <div *ngIf="person$ | async as person; else personLoading">
        Name: {{ person.name }} <br />
        Twitter: {{ person.twitter }}
      </div>
      <ng-template #personLoading>
        Loading person...
      </ng-template>
    </div>