Comment le spinner de chargement peut-il être implémenté dans une application angulaire 2 en cas de retard de réponse pour les requêtes http?

Question

Comment peut-on "charger le fileur" implémenté dans l'application angulaire 2 quand il y a un retard dans la réponse?

Answer 1

Il y a plusieurs façons de le faire. Je vais citer deux façons:

permet de dire, la valeur de propriété prop dépend de certaines sources externes (http appels) puis dans votre modèle, vous pouvez effectuer les opérations suivantes:

<ng-template *ngIf="prop else loading"> 
     {{prop}} 
    </ng-template> 
    <ng-template #loading> 
    <div class="ajax-loader"> 
     <img src="/assets/ajax-loading-img.gif" > 
    </div> 
    </ng-template> 

Une autre façon pourrait être:

export class YourComponent implements OnInit { 
    isLoading = false; 

    ngOnInit(){ 
     this.isLoading = true; 
     this.http.get(this.apiendpoint) 
      .do(()=> { // normal case scenario 
       this.isLoading = false; 
      },()=> { // error case scenario 
       this.isLoading = false; 
      }) 
      .subscribe((data) => { 
       // do your operation here. 

      }); 
    } 
    } 

Dans le modèle:.

<ng-template *ngIf="isLoading"> 
    <div class="ajax-loader"> 
     <img src="/assets/ajax-loading-img.gif" > 
    </div> 
    </ng-template>