how to set loader indicator in http call angular

Question

when i call my service i want to set the loader to true,and once the load is done i want to false it,here is where i call my service:

   this.service.getEventLog(e.turID, dtFrom, dtTo).subscribe(s => {
    this.eventlogs = s;
  });

and here is my service:

getEventLog(ip,from,to){

 
return this.http.post(this.url_event_log,{},{params:{id: ip,dtFrom: from,dtTo:to}});
 }

I have boolean field which according to the value set the loader:

  <div *ngIf="loading" class="k-i-loading"></div>

but where in my service i should set to true and false?

Answer 1

you can set like this,

getEventLog(){
  this.loading=true;
  this.service.getEventLog(e.turID, dtFrom, dtTo).subscribe(s => {
    this.eventlogs = s;
  }, (err) => {
    this.loading=false;
  }, () => {
    this.loading=false;
  }));
}