What is the best way to display a progress bar in Angular2?

Question

What is the best way to display a progress bar in an Angular2 application when an HTTP request is being carried out?

I tried the following using AngularMaterial2 progress bar:

<md-progress-bar mode="determinate" value="myValue"></md-progress-bar>

But how to find the 'value' for the above code?

(If it is not possible to find out the actual progress of an HTTP request, what is the best way to achieve a Youtube or Github style progress bar?)

Have you given this a try? not sure if it still works like that. https://stackoverflow.com/a/37159100/5227141 — j2L4e, Aug 17 '16 at 08:27

score 0 · Answer 1 · edited May 23 '17 at 12:18

We can not determine the time required to complete the HTTP request that's why indeterminate mode is more suitable for the progress of HTTP requests.

Angular's Http service returns an Observable to which we can subscribe and handle the response, right now there is no mechanism available to get progress from Http service.

One way is to use XmlHttpRequest to listen for the progress event and if the use its lengthComputable property and can show progress bar accordingly.

so one way to achieve a Youtube or Github style progress bar has been shown in this answer.

If you have more than one request, you could use the number of completed requests as a percentage.

Homer Knoax · Answer 2 · 2016-08-18T01:39:28.767

-3

Use library, module, or packages from public source code widely available in internet

Here are some Angular 2 examples:

edited Aug 18 '16 at 01:39

answered Aug 17 '16 at 06:18

Homer Knoax

3
3

They seem to be for Angular1? – duke636 Aug 17 '16 at 06:22
I fix the links now to be Angular 2 – Homer Knoax Aug 18 '16 at 01:40

What is the best way to display a progress bar in Angular2?

2 Answers2