HTTP Interceptor + Material Progress Loader | The best use case explained in Angular | Service calls

Опубликовано: 20 Октябрь 2024
на канале: Shaheer Shukur

55,898

1.2k

Complete Playlist: • Web Application Development

In this video, I explained the best use case/combination of HTTP #interceptor and #angular material progress #loader.

Source Code: https://github.com/shaheershukur/Mark...

Closed Captioning:
Have you noticed the loading progress bar in youtube, at the top when a communication is happening in the background?
Have you noticed this loading spinner before the video starts playing?
In this video, we will add a progress bar and spinner for our application.
For that, first we will add the Material Progress Bar module in the app module file.
Now, open the nav components HTML file.
In the main contents section, we will add a div, inside which we will place the material progress bar.
The material progress bar can be of different types.
Determinate requires a input value to display the progress.
Indeterminate does not require any input. It simply displays the loader.
Buffer type requires input values for buffer and progress.
Query type does not require any input. It displays the animation backward.
We will use the indeterminate mode.
Let's run the application and see.
This is how it will look like.
Since this needs to be displayed in front of everything else whenever network calls happen,
we must add some CSS styling to it.
Let's add the css class for progress bar's container div.
Open the CSS file and define the classes here.
The container must have position fixed. This will keep the div fixed at the top.
set width to 100%, so that the entire loader will be visible.
set z-index greater than 1.
z-index value determines where the div will be placed in the stack of HTML elements.
Higher index value makes sure that the div is at the front.
Let's keep it as 99.
Before moving on, we will just add a default route to our application.
Open the app routing module file, and add this path to the routes array.
From now on, every time a unknown path is detected, the application will be redirected to the home route.
For that we need to implement HTTP Interceptor in Angular.
An Http Interceptor can know about, each and every Http request calls happening in the application.
When a Http request starts or completes, the interceptor will inform us.
In our project, we will first create a folder named 'loader'.
Open the folder in terminal, and create service named 'loader'.
Here we will create a public variable, of type BehaviorSubject with initial value 'false'.
Our material progress bar will be displayed based its value.
If it is true, progress bar will be shown, else hidden.
We must inject this service in our nav component.
And use the public variable 'is loading', in the ngIf directive.
Since this is a Observable type variable, we must add the async pipe here.
The progress bar is not displayed because the initial value of 'is loading' is false.
If it is set to true, the loader will be displayed.

To set its value, we will add an interceptor to know when an API call is happening, and when the API call is getting completed.
Create one more service named 'interceptor'.
This service must implement HttpInterceptor.
An error will be displayed which asks us to override the required 'intercept' method.
intercept is the method which will be invoked everytime a Http call is detected.
Inside this method, we will update the boolean value of 'is loading'.
Let's inject the loader service here.
In the intercept method, first we will set the variable to true. so that the loader will be visible.
Since this is a Behavior Subject, we must call the 'next' method to update the value.
After that, we must return the next handle to complete the API call.
Also, we need to check for the completion of API call, to hide the loader.
For that, we must pipe the request, and use the finalize method to hide the loader at last.
The finalize method will be invoked even if the request terminates due to any errors.
Inside the finalize method, we will update the value of 'is loading' to false.
For the Http interceptor to work, we must add it in the providers section of app module, Like this.
Http Interceptor requires the 'multi' property to be true.
That worked perfectly, but so quickly.
For testing, let's add a timer in the express JS server.
In the deals router file, we will add a timeout of 3 seconds.
We shall move our code to the timout callback.
Now, let's run the application and see.
As we can see, the application is showing the loader when the API call is happening.
For that, first we must use the material progress spinner module in the app module file.
In the HTML file, we must delete the progress bar and use the material spinner.
The spinner is hardly visible.
Let's make some changes to the CSS.
In the loader container class,
change the position type to absolute.
set height to 100 percent.
set the background color to black, and opacity to 0.8
And for the material spinner element, add the style attributes top and left.
Both 50 percent.
Run the application