Angular Loading Spinner Component for API calls | HTTP Requests Globally | CodeWithSrini

implementing a loading spinner for your application is fairly easy the usual approach will be injecting a loading service on each angular services and then start the spinner every time a call is made and stop the spinner when your service call is completed like so you will be adding your spinner manually here so it'll be like start the spinner and you'll be ending your spinner after your call gets completed we are going to do things differently here we will implement a common loading spinner service for an entire app so if you're going to use your API from any of these components I mean any components in your application the spinner gets triggered and as a common service and then you'll be seeing a spinner action going on here and for this tutorial i created and created a node.js service and started listening to an api which is just a simple sample test URL and that doesn't give a response proper response it'll just be very true or true or just an empty object okay so it doesn't make matters for us because all we need is just delay the API for like a few seconds and to show the spinner bouncing around and then we are done with it for this to work we need three parts in our application so the first part is the spinner component we need to create a component for our spinner and then we need we need to have a service for our spinner and finally we need HTTP interceptor for our spinner to get trigger so this is where we'll be triggering our spinner component I mean spinner service and that in turns show up the spinner and disables the spinner like so and we already have HTTP interceptor in our app to learn more about HTTP interceptor I will add a link to the tutorial in the description below peace have a look because I will be I have talked more about that in that tutorial okay so that covers deeply about catching an error globally and things like that all right so let's get started with creating our spinner component for that mean ng GC and Spiner so that will create a component component for us so it'll be in yeah I just created here it will be just under our app folder so we have spinner component stylesheet and the component file right now you can restructure your app files properly like you can just regroup you can create something called Co and you can just dragon I mean you can just create inside the core and keep keep your components keep your commonly used components organized by this way because you know when the application grows larger it will be really difficult to maintain to to have an eyeball like which is where and what is happening things like okay okay for now you know let's ignore this part because that's not under our scope let's just focus only on spinner now in the spinner first thing what I will do is I will go to the HTML now before that let this be right there we'll go to the component and you need to add your spinner at the very last bottom of the line so it will be app spinner so that means you're saying that your spinner is will be available throughout your app okay so when you see look at your app it's available over there now we need to go inside the spinner component and do all our dirty works there so I'll just drag the spinner part here now we can paint up our HTML I already have a prefabricated code and I will drop a link for a github where you can have a reference of this code this particular code like spin around spin in class because that's going to be quite an animation which will be saying yes it involves CSS and other bits see it's animation and yeah we have a page overlay wrapper and we need to apply CSS for that so I do have a prefab code for CSS as well I'll just gonna copy based from my sample okay so immediately you you will notice our application is come alive and it is just there you know that there is no triggering of start or you're going to stop nothing is happening it is just there because we just added our spinner to our main app component and it'll it'll just stay there you can't do anything at all so we need to tell our app component tell our spinner to go off and on when it's needed okay so this part is done let's close this one and yeah we will be coming back to this later now in our the next part will be we need to create a service for our spinner so that could be ng g s spinner slash spinner now this will create a service for our our spinner component so that'll be this in the spinner component we need to keep track of two main things one is the count and the other one is the event that we are going to trigger so count will be starting from zero and the trigger part will be either it's a string either a start or stop so that trigger part that trigger the even that we are triggering will be of will be of an observable so basically a behavior subject so let's get started on this define a private field called count equals zero and we need to have a spinner observable observable you behavior subject and the subject is of type string so we leave the constructor as it is so so we need to export we need to not export we need to expose this spinner to our spinner component for that we need to define a gate spinner observer so we can't just expose the private private field in a class to another class right so for that purpose we'll be doing this observable of string and return you know dot s observe okay so as I said in my earlier tutorial that doing this is a best practice so you should make sure that you do you return your observable like this okay so that you won't expose your feet in a class private feeling a class to another class unnecessarily right and then so whenever an API gets triggered it started okay when you're going to initiate an API call let's call them as requests started and the requests started will host will check if this took count triple equals one okay so what we are saying is the count is initially 0 and we are raising that up to 1 you know you can have your third your way of I mean incrementing your count and then checking it for one now you can do whichever fashion you want we just wanted to know that whether and the I mean the API service has started and we need to keep this count to be even keep this spinner to be showing in our screen so that's the whole point so you can come up with your own logic if you like but this is the one I'm currently sticking with so we are sending a start event from our I mean we are triggering a an event with a start string so this will be made use when we are going to subscribe them in our spinner component okay so I think you might buy this time you might have got the whole point of what I'm trying to do here and then request ended when you're when you get the when you get an HTTP response completed right so this will be if just took count follicles zero or zero so here we're gonna say okay this dot spinner next stop right so this will do now for echo start we have a we are going to emit start and then for request ended we will do a stop okay so we are going to watch on these two strings so that's that and finally request ended Oh Star Trek was tendered I think we need to have some reset spinner area in case if there is an error or you know some calamity has happened in your application you know you need some sort of a fallback to revert back to a previous state okay so the pin R will emit a stop event right so our service class is completed so this is pretty much everything so when when you when an API is getting started we need to trigger this and it's going to end we need to trigger this I mean we will be calling this and finally if there is anything that I think we're gonna be using it but you know let's just keep it for future purposes okay so once this is done now we can straight move to our component file in the component right we need we need to first we need to define to hide or show this the spinner so for this for this we need to have show spinner equals false okay so the default will be false which means we don't need to show by default and now what I'm going to do is I will set this here as a if condition so that will be ng if and we're gonna show spinner or not okay so it disappears because the default is false now let's listen to our subscription or the observer absorb okay so for this let's extend in in our constructor we need to inject our spinner class so that'll be private spinner service in a service and let's have a in it method not this on any this have in it mother and let's define that in it here okay and one more one more thing we needed which is pry waived CV ref change detection yeah okay so in the in it we are going to listen here right so that'll be spinner service dot get spinner as observer word so you have your you you set up your kit spinner observer right so you're returning our observable here and we are making use of it over here alright now we will be subscribing to them so they'll be subscribed and obviously the status of our spinner ok now we have everything set so we'll be receiving our status start or stop whenever whenever a trigger has happened like an API call has happened and we're gonna make use of that status over here so that'll be this dot show spinner equals status equals equals start so only in case of status start this will turn into true and then we're going to show our spinner over here okay now now we're good now the last piece of the puzzle is the HTTP interceptor let's close this one up oh yes I forgot one more thing we need to add a change detector over here and little changes because in some components an API call may not impact the changed may not run a change duction cycle so in that case we need to manually trigger them okay so we need to first trigger a service let's go to the API interceptor and here need to draw a constructor so constructor of and finally so in the intercept part okay whatever application of whatever API that is called we need to just go ahead and trigger our request it was started and so this part gets triggered and we need to find a way where we can stop the bus you know so once it moves to the handler when the control moves to the handler and this part is where we will be receiving our response so we are safe - safe to say that we can close our spinner here request ended and also we can come over here before anything happens okay we can have request reset hospital all right so once we done with everything we are hit with a snag which is a sort of null something to do with the observable which is which the change detection cycle now to overcome this first mistake I have done is adding a unit calling the calling in it inside constructor so moving them into a ng on in it you know proper life cycle hook now things will be alright so when you're going to make assume that you're going to make a NEPA call through refresh or something you know we got our bouncing be back alright so we have a fully functional spinner that works for any API service calls from any component that is made so if you're going to use your if you're going to use API service from any of the components let's say from this component or from a B a B component or even component your spinner will get triggered because you're using it in an either intercepting your API call and then you're calling it from there so it is basically global I mean there are some room for improvements so we can add more animation and smooth transition so far it's not that smooth when it is appearing or disappearing you know the transition is not really good so we can improve that and in some cases we don't need the spinner at all for example you may have a notepad in your application like the one in the Google Docs wherein you just keep typing and then you don't want while you're typing you know it's doing an autosave you don't want that spinner to interrupt your workflow okay so to overcome that what you can do is you can list down all your URLs you'll be doing that in your application like you will be having an array of API URLs and from there you will be calling inside your services so you can have a flag saying that show spinner yes or I mean true or false in that way you will be showing spinner only for the cases where you need it okay so this is one thing and so basically white listing your API calls so once again thank you for watching my tutorial and please to share your suggestions and do not forget to share with your friends see you again bye

Channel: CodeWithSrini

Views: 41,814

Keywords: javascript, typescript, angular lesson, angular course, pass data between component, code with chris, codewithchris, codewith srini, code with srini, codewithsrini, viewchild, component, shared service, HTTP Interceptor, Angular loading spinner, spinner, spinner service, spinner stackblitz, angular spinner, http requests, http, request

Id: H9KLIbisVJ8

Length: 17min 59sec (1079 seconds)

Published: Thu Jul 16 2020