Angular 2 Loader on components and http request

Question

I'm creating an Angular 2 application that uses REST API to retrieve a list of products and a lot of other features.

I want to implement a sort of loader in two ways:

• a loader for each component when the page is loaded, for example, when you load the product category page, you will see a spinner over an overlay that load until the http request and the render is finished.

• the same thing when you click for example "add to cart" i want to create an overlay over the product column that disable for a few second clicking again on the add to cart button until the product is added to cart.

How can I do this?

Thanks in advance!

Answer 1

i've founded a sort of solution on the net.

It's this: https://www.npmjs.com/package/angular2-busy

And i'm able to manage the loader on a http request.

It's easy to use and you can applicate this 'busy' loader on Promises and Observable's subscription.

Hope it helps.

Answer 2

You can add a loader for each component when the page is loaded in a simple way. Just add a a loader gif inside the component tag. It will be replaced with the data from the component when component has recived the data from the REST-API.

ex: <mycomponent><img src="spinner.gif"></mycomponent>

For the second part, "add to cart". You should be able to add a css-class to the product column with the overlay, triggered when you click "add to cart". Call the API and add the product, in the subscription for the HTTP observable, you can set a "callback" method to be called when the operation is complete, in your case close the overlay.