In a web application, we generally show a process status by graphical indicators like progress bars and spinners. In this post, we will discuss How to Implement the most common progress indicator Progress bar and Spinners.
Angular Material provides a wide range of web components which are very easy to implement and use in Angular applications.
In this post, we will learn how to use Angular’s Interceptor class to show a common loader/ spinner indicating about an API Http call is in progress. We’ll create a UI component with a custom loader to keep trace of every Http call going from the client application to a remote server.
Angular Interceptors can be used in a number of ways as they work pretty well in manipulating and managing HTTP calls to communicate that we make from a client-side web application. Single Page Applications(SPA) build using Angular framework, use HttpClient module to make HTTP calls to the server for retrieving data to update pages with dynamic information. So it becomes very important to provide information about the status of API calls we make to a remote server to the users. Loaders/ Spinners and sometimes Progress bars are shown to inform the user that there are some server requests going on.