Angular 4 HttpClient Progress Event how to track each percentage in runtime

Question

PS: I edited this question because it was marked duplicated. So this is a new question that is different from the given duplicated question.

I have a provider in Ionic that will handle all my API request to the server. On each post/get/patch/delete request or basically the CRUD operations. I want to perform an ProgressEvent on that http operation to track the progress percentage of the request. So basically I will have an stream of data of that percentage.

Here is the code that I have below:

publishEbook(data) {
const req = new HttpRequest('POST', `${url}/someApiEndpoint`, data, {
  reportProgress: true
});

return new Promise((resolve, reject) => {
  this.http.request(req).subscribe((event: HttpEvent<any>) => {
    switch (event.type) {
      case HttpEventType.Sent:
        console.log('Request sent!');
        break;
      case HttpEventType.ResponseHeader:
        console.log('Response header received!');
        break;
      case HttpEventType.UploadProgress:
        const percentDone = Math.round(100 * event.loaded / event.total);
        console.log(`Posting in progress! ${ percentDone }%`);
        console.log(`Event: ${event.loaded}`);
        break;
      case HttpEventType.Response:
        console.log(' Done!', event.body);
        resolve(data);
    }
  }, err => {
    console.log(err);
    reject(err)
  });
});

}

The problem is I always get 100% when connected to the internet and NaN when offline or because the http call is so fast it can't be intercept it's value? Is it still possible?

This is the line of code to determine the progress percentage of the http operation below:

const percentDone = Math.round(100 * event.loaded / event.total);

So how do I track the progress percentage from 0, 1, 2, 50 to 100% or a listener that gets called whenever a new chunk of data is passed in and get the percentage?

I already tried angular-progress-http but can't find anything. I also tried axios with the help of Native API of JavaScript progressEvent base on this issue and has the same result.

Will I create an observable for this and listen to the stream of data? But how?

Appreciate if someone could help. Thanks in advance.