Angular 2 How to Use ngif Display a loading message


If our component is not ready and waiting for data from server, then we can add loader using *ngIf. Steps:

First declare a boolean:

loading: boolean = false;

Next, in your component add a lifecycle hook called ngOnInit

ngOnInit() {
   this.loading = true;

and after you get complete data from server set you loading boolean to false.


In your html template use *ngIf with the loading property:

<div *ngIf="loading" class="progress">
   <div class="progress-bar info" style="width: 125%;"></div>