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

The best angular video thar I've ever seen!! Watching all them...

[@shaheershukur]

thank you so much for your feedback.. 😊

[@nicolas-yates]

For those facing the issue with multiple parallel requests. This ensures the loader isn't set to false until all requests are completed: @Injectable() export class LoaderInterceptor implements HttpInterceptor { private count = 0; constructor(private loaderService: LoaderService) {} intercept(request: HttpRequest, next: HttpHandler): Observable { this.loaderService.isLoading.next(true); this.count++; return next.handle(request).pipe( finalize(() => { this.count--; if (this.count === 0) { this.loaderService.isLoading.next(false); } }) ); } }

[@johnherrera5913]

Master!!! Very nice and crystal clear explanation, thank u for sharing your knowledge.

[@shaheershukur]

Glad it was helpful!😊

[@AkshayGothwal]

far far better then anyone easy to understand to the point

[@TheOfficialMovmnt]

Thank you for sharing! I’m definitely subscribing to you after watching this video. You explained everything very well. Thank you and keep it up!

[@shaheershukur]

Awesome! Thank you!😊

[@angelsevilla406]

Clear and easy to understand, thanks so much, I'll watch your content more often from now on.

[@Prodigyfer]

Worked like a charm in 15min. Thank you!

[@HibiTeamQueso]

Keep the videos coming, this is great and much better explained than others

[@chemakhiimad6325]

thank you very much for this solution. except when tiny problem with it, when debuggin the app it shows this ExpressionChangedAfterItHasBeenCheckedError error

[@orangeyt2262]

Gracias por compartir tus conocimientos, Thank you for sharing your knowledges

[@hazemhasan4931]

Hi, Thanks for this video, I just have a question : how can we do to call that the interceptor just when we load the data?

[@sunits3300]

the interceptor will be called in any http call in and out of the app

[@rafaelyahu]

its work but I get error Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'

[@ahmeda.maksoud9637]

Thanks , but It does not work with multiple parallel http requests

[@uvindupathirana3221]

Thank you very much this was the thing I was searching for😁❤👌😊😍!!

[@sofianezerrouki]

Big information at small time, Thanks a lot

[@Vicky16987]

this is very useful for my application development sir

[@thamizhmanims]

Great tutorial, Thanks for sharing. But I am getting : "NG0100: Expression has changed after it was checked" error in the console. How can I fix this?

[@rafaelyahu]

me too

[@abhijeetrkv]

Nicely explained and works with Angular 11 as well, Subscribing the channel right away.

[@thaisonvu4306]

You make my day better. Thanks!

[@bbogdanz]

Very good tutorials! Cheers man!

[@arturkhachatryan63]

Thank you, very perfectly tutorial and simple understand!

[@danieleduardo1085]

Thanks i need implement this characteristcs and it worked

[@havefun5519]

I loaded 10000+ data rows, however api time is finish in 2.79s with interceptor however dev tools network tab, the API preview data is not load actually, need to wait for around 10s+ and page freeze. Any idea?

[@avk1943]

this is great even explaining the small details

[@joaocarlosgoncalves5405]

Thank you, clear and easy understand

[@pigamerpt1835]

Thank you so much! Perfect tutorial

[@shaheershukur]

Glad you liked it!😊

[@tuananhngyen2985]

I don't think this is the exact behavior that KZbin implemented because I notice that KZbin shows the progress bar while fetching data for the next route and as soon as all data is fetched, the progress bar disappears then new view (component) along with its data shows up

[@ijazkhan-mq4jy]

Wow Sir you are genius thankssss

[@rekhamali8498]

Thank you so much for logic for spinner

[@prashanthnaidu11]

Thanku Sir ...For The video! 👌

[@shaheershukur]

Most welcome 😊.. glad you like it!

[@alphaarani2576]

Hii, How to set a value from 0 to 100 in the progress-bar when waiting for the request to finish?

[@waldBestMusics]

Hi, Thx for the video, really helpfull, could you make more angular videos, !, really well explained.

[@TrungNguyen-iz2zk]

it works perfect thank you so much

[@themusikislive]

very very thank you, how easily explain

[@randommosta2489]

working...super thanks

[@GuilhermeAlmeida-qh1fe]

Thanks for the help!

[@dusabaneduardc.4516]

You are so great! Just Wow thaaanks

[@abdullahbinabdullah3064]

Sir which text to speech software you are using in your video ?

[@shaheershukur]

Hi abdulla, im using animaker voice web app for TTS

[@abdullahbinabdullah3064]

@@shaheershukur thanks bro ❤️

[@TheWilsonlol]

Great video! Thanks!

[@ivansxturno]

Thanks man, you're the best

[@snehapidikiti8011]

How to implement loader for websocket url call through this interceptor concept?

[@panyafuang4038]

Thank you It's very cool, Can you make dark them tutorial ?

[@shaheershukur]

I believe it's already present at 7:49 . However, you may also take a look at this kzbin.info/www/bejne/qGe8mKpvgZposMk

[@MohamedFathyKamalAboelmaged]

Best of the best

[@dayachoudekar8]

Very nice vidoe. I loved it

[@shaheershukur]

Thank you so much daya 😀

[@juliano9052]

Thank you so much!

[@goranqaqnass5867]

that was great thanks

[@ricardovalenciamartinez5072]

Excelent video!

[@mmk1334]

very helpful thanks

[@ams1ams53]

It works but I am getting this Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError

[@arleydavidvelasco5761]

i have the same error

[@insomniety]

I'm encountering the same error. Anyone solved it?

[@Rubariton]

I encountered the same error. I figure that HTML doesnt really like observables in an *ngIF statement as it gets confused on what to do. Instead how i fixed it is to bind it to hidden. Example: x.component.html: Loading data ... interceptor.service.ts: export class InterceptorService implements HttpInterceptor { constructor(public loaderService: LoaderService) {} count = 0; intercept( req: HttpRequest, next: HttpHandler ): Observable { if (this.count === 0) { this.loaderService.isLoading.next(true); // To only submit the value of true to the isLoading observable once, instead of spamming it with true } this.count++; // Increments count by 1 for each http request return next.handle(req).pipe( finalize(() => { this.count--; // substract the count for each http req that has been fullfilled // if count is 0 then all reqs have been fullfilled and isLoading wont go to false to early if (this.count === 0) { this.loaderService.isLoading.next(false); } }) ); } }

[@Поканепридумал-и3э]

@@insomniety use OnInit hook when initialize your observable variable

[@viniciusalves5893]

Great video!!!!

[@vidyasagarkota9813]

I'm getting ERROR in console: core.mjs:7635 ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'.🤥

[@alphaarani2576]

You need add in your constructor "private cdref: ChangeDetectorRef" Then add: ngAfterContentChecked() { this.cdref.detectChanges(); }

[@bluesynthsoftwarelabs2453]

Thank you

[@Alfredfreezy3]

Beautiful

[@shaheershukur]

Thank you! Cheers! 😊

[@frontenddevtech1155]

Super Video

[@shaheershukur]

Thanks 🙂

[@SLCODEGEN]

Thank you!

[@loctong88]

awesome, thank you

[@pusarlaaishwarya5035]

Ohhh sorry ...tqs anyway👍👍👍...nice video👍👍👍

[@shaheershukur]

Hi Aishwarya, here's the link github.com/shaheershukur/Market-Web-Application *btw it was already mentioned in the video description 😊

[@jobinwilfred6391]

does it work when we have multiple api calls when a page loads

[@shaheershukur]

Yes.. that is the main reason we use interceptor, to tap each and every requests. In this example, Interceptor will update the BehaviorSubjects value(which in turn hides and unhides the loader) even for multiple api calls.

[@jobinwilfred6391]

@@shaheershukur but if an api call finishes early, before another call in the same page, which will result in turning off the loader before the second call completes. right?

[@shaheershukur]

Ok, now I got you.. In case there are multiple service calls to be made in a single page itself, we may consider adding a counter variable in the interceptor service. Whenever service call(multiple) starts, increment it.. And inside the finalize() method, decrement the count.. at last, IF AND ONLY IF the counter has value 0, turn off the loader.... I believe that can solve the issue.

[@jobinwilfred6391]

@@shaheershukur Thanks👍

[@shaheershukur]

@jobin thank you so much for this question.. it may help other too.. 👍😊

[@tanmayingole8495]

thank you :)

[@shaleemabasheer7063]

✌👌

[@shaheershukur]

Thanks 😊

[@leoguillaume5682]

thanks :)

[@abrincsaiju9842]

malayali anno ....

[@shaheershukur]

haa athe..😄

[@abrincsaiju9842]

Polii

[@thanhphongquach1690]

Thank you so much!