Angular 9 Tutorial For Beginners #66 - HTTP Interceptors

[@rembautimes8808]

Hi Shridhar - I am new to Angular and have been periodically following your tutorials. By way of background I am in the corporate sector. This tutorial is awesome - folk should be patient and be prepared to code along . Unpacks a complicated topic. Thanks

[@ARCTutorials]

Thanks for your kind words and feedback. I am right here in case you get stuck or have any doubts! Happy Coding!

[@kiransaravade5127]

great video.thanx

[@ARCTutorials]

Thanks buddy for your kind words 🙏

[@murtazamohammadi9370]

Do you have turorials about ngrx/store in agular ?

[@ARCTutorials]

I will soon add that series

[@uditkumar3028]

Hi Shreedhar, I am following your video for interview prepration. When ever I search for something I got solution from your video.
Yesterday I have given interview and they asked How we can log every thing for debuging process. I was confused like we can do ot from interseptor or not. I have seen your video and you explained with the same example. Its great . Greatful to you. Thank you so much.

[@ARCTutorials]

Thank you Udit for your kind support and words. Means a lot. Pls let me know if I can be of any help to you!

[@sreenuksr]

Angular 9 Tutorial For Beginners #66 - HTTP Interceptors
- Interceptors handles HttpRequest and HttpResponse
- Intercepts()
- Intercepts() => parameters => req, next
- ng g interceptor

Use Case #1: Create Contact -> log that data -> server
Use Case#2: Create Contact -> show loading icon -> server
interceptor.ts
import { Injectable } from '@angular/core';
import {
HttpRequest,
HttpHandler,
HttpEvent,
HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class LoginInterceptor implements HttpInterceptor {
constructor() {}
intercept(request: HttpRequest, next: HttpHandler): Observable {
console.log(request);
console.log('call made ' + request.url);
console.log('call made ' + request.urlWithParams);
return next.handle(request);
}
}
app.module.ts
import{HttpClientModule, HTTP_INTERCEPTORS} from '@angular/common/http';
import{LoginInterceptor} from './login.interceptor';
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: LoginInterceptor, multi:true }
],

[@ARCTutorials]

Thanks Sreeni 👍

[@bganeshprabhu1095]

Awesome 👍

[@nitin4598]

This is what I am looking for. An easy explanation!!

[@ARCTutorials]

Thanks Nithin 🙏

[@Sumit-yn7dn]

@@ARCTutorials how to make these api calls synchronous like if some of my code depends on api response then I want that observable to finish and then my code work how can i do this?

[@amanbaghel1408]

I have one question regard interceptor like in a url we pass the query parameter like a name that is arc some space tutorial. so it is causing an error because of space so, how to fix it with the help of interceptor

[@yendrrek6703]

Thank you very much.

[@kaustavibanerjee4778]

Thanks to show easy way to understand "Interceptor".

[@ARCTutorials]

Glad you liked it!

[@himeshkumar8606]

Good job bro

[@ARCTutorials]

Thank you so much buddy for your kind words

[@sumitrashmi4500]

The whole playlist is awesome keep up your good work

[@ARCTutorials]

Thank you so much Sumit. If you liked this tutorial playlist, u will love the next practical project starting tomorrow 👍 Please stay tuned and make sure u subscribe to the channel

[@sudhirkumbhare8941]

Very practical knowledge. Good work keep it up

[@ARCTutorials]

Thanks a lot

[@SantoshThakur-ll3kd]

It was nice: Can explain, if I want some API to go to the server with an interceptor or other without... How will do?

[@ARCTutorials]

Hi Santosh. Sure I will try to cover this use case as well.

[@kaushikbhadani]

Thank you Shridhar, This is what I always looking for. You did a really good job.

[@ARCTutorials]

You are most welcome. Thanks for your kind words Kaushik.

[@RZ009]

Thank you

[@akshathabk6621]

Can you explain difference between docheck and ngonchanges

[@jacksm6211]

you are the best.... trust me wen I say it....

[@ARCTutorials]

Thank you so much buddy!! Ur words are mu motivation. Cheers Sridhar

[@maheshtamrakar292]

clear explanation, thank you for making the videos like this on angular:)

[@mp-fg2zw]

hi sir...thanks for the video...waiting for the project on Angular...last recent online live demo\class did not happened..do you have plan to take it or plan to provide a project..thank you.

[@ARCTutorials]

Hi mp. Yes im still planning to do a live project.

[@princeamar5654]

Appreciating all your effort. Please make a video on "Angular Change Detection".

[@ARCTutorials]

Hi Amar. Sure. Will do it soon

[@sonnysonny66]

Thank you for this great video

[@ARCTutorials]

Glad it was helpful!

[@abhisolutions7538]

Simply awesome and Great content

[@ARCTutorials]

Glad you enjoyed it

[@dollardreams5811]

Please upload the video about how we build the production builds

[@ARCTutorials]

Bang on!!! Its coming up right after few testing tutorials. I am sure you will love it!!! Stay tuned. Regards Sridhar

[@rakeshgautam1407]

Great videos on Angular 9 for beginners
Sir, please share all episode's NOTES.
Thanks for such good tutorial.

[@ARCTutorials]

Sure I will

[@sufailkalathil169]

How to prioritize certain HTTP requests from a Queue using angular Interceptor

[@anatoliedunai2937]

Thank you!

[@ARCTutorials]

You're welcome!

[@pushkardeshmukh1987]

Thanks for such good tutorial.
Please let me know if you have tutorial on Angular state management.

[@ARCTutorials]

Will upload soon

[@jasberraja2727]

Sir , I found ur errors , that is url error
Wrong : ...../contacts/? (Query Params error)
Correct : ...../contacts?

[@alxx736]

In the Interceptor we always return an Observable. My question is , who is in charge of subscring to that Observable? In which moment that happen ?

[@HimmatSingh-ml1re]

sir which company you worked for?

[@ARCTutorials]

I work with one of the IT companies in India

[@dollardreams5811]

Please upload the video about Aot and Jit
Ivy process

[@ARCTutorials]

After few testing tutorials, we deep dive into build and deployments.

[@vishnuprasad2188]

Can you please upload the video about how to debug angular code.

[@ARCTutorials]

That's coming very soon my friend. Thanks Sridhar

[@pusarlaaishwarya5035]

nice videos!!!! can you provide gitlinks of this examples

[@ARCTutorials]

Will upload soon

[@chaiithanyapramodh3389]

kudos to your efforts man, you have covered almost all topics In angular and reduced our work of going through the documentation,

[@ARCTutorials]

Thanks Pramodh for your kind words 🙏

[@yashbehara7525]

great content but video can be trimmed down to 10 min .

[@ARCTutorials]

Sure buddy. Thank you so much for your feedback

[@thambimoirangthem4499]

sir please make videos on angular security [authentication , authorization, jwt ,role based,.......]. your tutorials are really helpful.

[@ARCTutorials]

Sure Gyanchandra. Will do soon.

[@rajeshseptember09]

Good video and clear explanations too. But you could have cut the video short to 10 minutes. Felt it was a bit too draggy. Otherwise good work !

[@ARCTutorials]

Sure Rajesh. Thanks for the feedback. Will incorporate it going forward.

[@sipusipu3106]

How to show aadhar card in " xxxxxxx6788" form in angular. But value never change.

[@ARCTutorials]

Hi Sipu. You will need to use a custom directive and apply input masking to hide the characters and show only last 4 characters.

[@krishnachaitanya3169]

Sir please make a video on How to handle HTTP Errors.......

[@ARCTutorials]

Hi Krishna. Those are coming soon as well. Thanks Sridhar

[@DeepakKumar-ej2vz]

Hi sir can you share angular notes

[@ARCTutorials]

Hi Deepak. Please send email at [e-mail]

[@AkashjitNayak]

We should clone the request and then modify with request.clone()

[@vaibhavprakash9535]

From where can we get these notes sir

[@ARCTutorials]

Hi Vaibhav. Can u pls send email at [e-mail]

[@ARCTutorials]

Got it Vaibhav. Will send it soon 👍

[@vaibhavprakash9535]

Thanks sir

[@sivateja7179]

teaching should not be like teacher practice session.