title: How to track Angular HTTP POST call progress
body: <p>I trying to put a progress bar in my http call but some how i wont be able to make a sync HTTP call request instead its going in async fashion. </p>
  
  <p>below is function for making http call</p>
  
  <pre><code> public authenticationt2cHTTP(email, password) {
      console.log("authenticationt2cHTTP WITH HEADERS");
      const body = new HttpParams()
        .set('email', email)
        .set('password', password);
      const req = new HttpRequest('POST', 'http://192.168.0.135:8080/rest/auth/login', body, {
        reportProgress: true,
        headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')
      });
  
      this.http.request(req).subscribe(event =&gt; {
        // Via this API, you get access to the raw event stream.
        // Look for upload progress events.
        if (event.type === HttpEventType.UploadProgress) {
          // This is an upload progress event. Compute and show the % done:
          const percentDone = Math.round(100 * event.loaded / event.total);
          console.log(`File is ${percentDone}% uploaded.`);
        } else if (event instanceof HttpResponse) {
          console.log('File is completely uploaded!');
        }
      });
  
    }
  </code></pre>
  
  <p>below is code which i am using in my component class for making a call and showload is temp variable for showing/hiding preloader of the page.</p>
  
  <pre><code>this.showLoader = false;
        var k = this.myhttpService.authenticationt2c(this.form.get("email").value, this.form.get("password").value);
        this.showLoader = true;
  </code></pre>