Add an Angular Loading Spinner with RxJS and Material

#Angular #Loading #Spinner #rxjs
Want to learn how to create a full stack application with Angular and Firebase?
Grab my new course 'Angular Firebase Authentication: Create Full Sign up App' with 50% off here:
www.udemy.com/...
In this video, I show you how to add an Angular Loading Spinner with RxJS and automatically make it appear whenever there is a network call by using HttpInterceptor.
The complete code for this tutorial can be found here:
github.com/thi...
Follow me on:
Twitter - / zoaibdev
Facebook - / thisiszoaib
LinkedIn - / zoaib-khan-b6456815
And check out my blog at zoaibkhan.com!
Cheers :)

[@ZoaibKhan]

Hey guys! Check out the follow up video to this tutorial on the link below. I cover some improvements especially related to making multiple calls and their issues with the spinner kzbin.info/www/bejne/imnXd4ZsqZili9k

[@TheFilburt88]

This is one of the best tutorials I've seen so far, you explained it very well. Thank you so Much!

[@ZoaibKhan]

You're very welcome, Franco! Glad it has helped in some way :)

[@karthiksadanand5578]

This is one of the cleanest tutorials !, thank you

[@ZoaibKhan]

Thanks Karthik, glad you liked it!

[@MariaBadanina]

Thank you very much! This video helped me

[@ZoaibKhan]

Glad you liked it!

[@emmanuellatrustenomah532]

This was very helpful!

[@ZoaibKhan]

Glad you liked it! 👍

[@plumemotorpartpmp1625]

thank you teacher very good lesson : )

[@ZoaibKhan]

You're welcome :)

[@alexou857]

Thank you my man, you are the best :)

[@ZoaibKhan]

You're welcome. Glad you liked it :)

[@amalrajp83]

Hi Useful video👍. One qn , Will this work properly if multiple calls are done at same time?

[@ZoaibKhan]

Hey Amal! Good question :) The answer is no. To allow multiple calls at same time, we'll need to increment and decrement a counter on start and end of API calls in the interceptor. Then, only hide the spinner when counter is 0 i.e. no calls are in process. Hope that helps

[@amalrajp83]

@@ZoaibKhan Thanks for the repy

[@gradientO]

Good tutorial

[@ZoaibKhan]

Thanks!

[@giorgimerabishvili8194]

Thank you!

[@ZoaibKhan]

Welcome, Giorgi!

[@raviteja8798]

Hello sir, I have one doubt regarding this. please help me sir, please reply

[@ZoaibKhan]

What kind of doubt, jhon?

[@ZoaibKhan]

@@raviteja8798 here's the follow up video to this tutorial which covers and fixes this issue. Hope it helps! :) kzbin.info/www/bejne/imnXd4ZsqZili9k

[@ZoaibKhan]

@@raviteja8798 ok, let me go through your problem in detail and see what the issue might be

[@ZoaibKhan]

@@raviteja8798 Hey! So after going your message in detail, it seems your problem is with the long-running API call on Component A. Ideally, you should add a way for the API call to be cancelled once the user navigates away from the component - because it's no longer needed. Here's a link for a possible solution: www.freakyjolly.com/angular-how-to-cancel-http-calls-on-router-change/ If you do need the data from the API call - then maybe you should use a global service with another behavior subject and load it there and add an exception in the interceptor - where the spinner doesn't show for this specific call. I'd suggest though to review this 1 minute long API call - because it would be pretty bad for user experience, besides creating this spinner problem... Hope this helps.

[@kiendinhkhoi]

How to show spinner and blur background bro?

[@tranquillityEnthusiast]

Need more vedios..

[@vuduyanh7791]

thank you so much , if settimeout for loading Spinner , what i do , please support

[@ZoaibKhan]

You're welcome, Vu! Can you describe in more detail, why do you want the settimeout for the loading spinner?

[@vuduyanh7791]

@@ZoaibKhan tks your , i do it success , However , I'm getting an error NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'.. your can help me .

[@ZoaibKhan]

Yes, this just appears in development and does not really affect the functionality much. But still, you can make a small change in the service on this line: loading$ = this._loading.asObservable().pipe(delay(1)); This is similar to setTimeout - using the RxJS delay operator instead because it looked cleaner to me. This should clear the error in development.

[@vuduyanh7791]

@@ZoaibKhan thanks your so much

[@ZoaibKhan]

@@vuduyanh7791 you're welcome :)

[@AGGPEE]

Oh me vengoooo

[@rohitsoni2439]

Those who are facing error expression changed please add this : public readonly loading$ = this._loading.asObservable().pipe(delay(1));

[@ZoaibKhan]

Thanks for the public service message Rohit!

[@JamesMoore-zg9ue]

I get the following error message. NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'.. This is something to do with the loading$ variable in my app.component.html. Just wondering if anyone knows a fix for this.

[@ZoaibKhan]

Hey James! It is a development time error only and the quickest fix for it will be to add a small delay so that the the loading value is updated in the next change detection cycle. If you look at the latest code (link in description), I've already fixed that there. Hope that helps!

[@ogunkayodeoluwaseun9348]

@@ZoaibKhan how does one add this delay??? cause I'm facing the same error

[@ZoaibKhan]

@@ogunkayodeoluwaseun9348 Check out the code in the description!