I have officially found a solution for this. After careful reading and understanding the use of http-events with the help of this article. I finally figured out that I was writing the write code I just didn't tested it very well because I didn't use file uploads so the http progress is so fast.
So here is a sample of what I did.
In my provider.ts
publishSomeAPI(data) {
const req = new HttpRequest('POST', `${url}/someAPIEndpoint`, data, {
// headers: You can put your headers type hear such as content/type, token...
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!');
this.getHttpEvent().next(event);
break;
case HttpEventType.ResponseHeader:
console.log('Response header received!');
this.getHttpEvent().next(event);
break;
case HttpEventType.UploadProgress:
this.getHttpEvent().next(event);
const percentDone = Math.round(100 * event.loaded / event.total);
console.log(`Posting in progress! ${percentDone}% \n
Bytes being upload: ${event.loaded} \n
Total no. of bytes to upload: ${event.total}`);
break;
case HttpEventType.Response:
this.getHttpEvent().next(event);
console.log('Done!', event.body);
resolve(event);
}
}, err => {
console.log(err);
reject(err)
});
});
}
I also created an observable which will observe and listen to the event that I had created above.
In top of my provider.ts file.
private httpEventListener: Subject<Object> = new Subject<Object>();
observeHttp: Observable<Object> = this.httpEventListener.asObservable();
below.
getHttpEvent(): Subject<Object> {
return this.httpEventListener;
}
After you created an observable in your service-provider.ts you can now start listening to that observable base on the http event that is executed or requested.
Now in your page.ts import the service or provider where you created the observable and put this code below in the constructor or whatever life cycle event you want to perform.
this.someService.observeHttp.subscribe(data => { console.log(`An http event happened: ${JSON.stringify(data, null, '\t')}`) })
Now you can do some state changes in the UI or perform another event base on that http event because you are now listening to the observable we created.
I found this ngx-loading-bar that can be useful for tracking events progress or loader.
NOTE: Use file uploads with simple text data instead of just small text data because small chunks of data without file will always return 100% when online or NaN with no connection even on low-end or mid-end devices.
