Adding a Spinner to Angular App on Outgoing HTTP Calls

Hi Everyone,

In Angular apps, it’s common to have to make HTTP calls to APIs. These calls can take some time to complete, which can leave the user wondering if the app is still working. To solve this issue, we can add a spinner to our Angular app that shows up whenever an HTTP call is made. In this tutorial, we’ll learn how to add a spinner to our Angular app using an HTTP interceptor.

In this video, we will explore how to implement a loading spinner in an Angular application using an HTTP interceptor and a spinner service. We will start by creating a spinner service that will be used to show or hide the spinner. Then, we will create an HTTP interceptor that will watch for outgoing HTTP calls and show the spinner when they are made. Finally, we will update our app component to show the spinner on the screen.

To automatically show a spinner whenever an outgoing HTTP call is made in an Angular application, you can create an HTTP interceptor. An interceptor is a middleware that intercepts outgoing HTTP requests and responses.

The source code is available at

Read more and keep code handy. Take a look at my blog

Please post your questions in the comment section and I will be happy to answer your questions.

Happy coding!

[KenStanley-ggng]

Getting error "No overload matches this call" when I add | async .. Angular 17

[arigalavenkatesh]

There's no css code for spinner in github....