How to show / hide loader on HTTP call - Angular Tutorial

hey cousin already this is always back with another angular tutorial it's been a while since I created a tutorial so today I'm going to be bringing you a very interesting tutorial now on my screen you can see I've got this progress spinner and this progress bar these two components are commonly used when you're loading a data or performing any async functions on your web application using angular usually when you have to show this loading spinner you have to create one and then you have to have some logic to disable now code can be really messy when you have to enable or disable these progress bars or loading Spinners I'm going to show you how you can create a custom decorator which you can apply to any async function which will make this progress winner appear and when the operation is finished or let's say promise is resolved it will just hide this progress winner so without further Ado let's get started we're going to create a div and set the ID to loading we're going to use angular material component which is going to be matte Dash spinner webstrom will automatically import the module for us let's specify some properties like color as one diameter I'm going to specify 80 and you need to specify the mode I'm going to use the intermediate mode we can also use a stroke property to give it a like you know a bit thickness so in this case we'll just use eight and then just close that I want to save the file you can see the progress spinner is appearing in our application we want to make this appear when async function happens we can do that with the CSS properties so let's do that next let's load data using HTTP client from Json placeholder which is like a service that you can use to download data through HTTP protocol so in Constructor function I'm going to import HTTP client next we can use that HTTP client to make a get request it's going to train error because you need to import HTTP client module in app module first let's create a data variable and I'm going to use async await here this.stp.get and then pass in the URL to just demonstrate that data is loading we're just going to console log at data to be client get method will return observable but I want to convert that Observer into a promise so I use rxjs last value from function which will convert the observable to promise and then we just log the data we go to app module and within the app module we import HTTP client module and then let's do a test so click on load data you'll see the API call and I received the data so it means our async function this loaded function is working currently our loading spinner is always up here so how do we hide this through CSS so I'm going to open this SAS file for this component let me open on the side and I'm gonna just paste something here so first of all if we look at this loading is the ID right and then from the ID we are specifying some CSS properties like display Flex just different content a line item and the visibility is the one uh which basically going to hide this so if you look at application the spinner is there but it's not visible anymore also this matte spinner it's targeting this component directly having its absolute property 50 and then 999 it's like you know it's gonna be appearing above everything else and if I make this property as visible save that and then we go and take a look at the replication and you know it's it's basically loading in the center now which is a good thing now how do we make this appear and this um and then hide it when there's no async functionality so first of all we're going to be making this hidden right let's go ahead and create a new typescript file I'll use this right click typescript load let's say loading Dot decorator and we're gonna add that there now this is The Decorator that we're going to be creating to help out the async function so I'm going to be pasting the code to save the time and then I'll try to explain that okay so here we have the code for types of decorator so here's a function name loading a decorator it is taking three parameters Target property key and in the descriptor within this function we are storing our original method from descriptor.value and we store that here next what we do is we will use this document.getelementby ID now the ID is this loading so let me just open that right here so whatever the ID that you specify here that's what I'm going to you know access the element through this get element by ID once I do have access I want to make sure it's not null or undefined what I'll do I'll just use this loading dot style.visibility is equal to visible so we will just you know make the property hidden visible which make which will make our component you know available next we are going to use the try catch block and within the trigretch block you see we have this original method which was stored here in this variable we will basically just run that using this dot apply method passing this and aux whatever the parameters that you without recent method this will basically run it and we're using this async await because we want to wait for this function to complete now next once this is complete if we uh if we have the loading already then we just make that you know property visibility property to Hidden which will make it disappear and then we just return the result also I'm using the catch block because if there is an error then we still want to hide the the loading bar next we're going to go to app component and we got this load data function I'm going to add a decorator load a decorator which basically a syntax is AD symbol and then the name of the decorator and in the function I'm going to Simply return a weight loss value and make the promise return any next let's go to application and then when I click on this load data you will see the spinner appearing I'm going to make the throttling to let's say a slow 3G because it will browser will act as a slow so now you can see the async function is triggering the spinner and once the async functionality is complete the spinner goes away automatically and that's happening just because of this loading decorator it's really the best way to deal with all the loading of your async functionality there are other use cases for this as well but for loading the data this is like the best thing you can do instead of you know having a check of you know creating a loading and then disappearing it on the time of completion now within the loading decorator once I debug this you'll see the descriptor the value has the original method which in this case is a load data and at the line number on teen it triggers that function once that function is complete then it will store the value coming from that API into result variable online number 19. breaking that function now and once the result is received then you see the result has all the data coming back from the Json placeholder and it just Returns the results and all happening within that decorator and that decorator concept is pretty pretty nice when you try to use it and you can see in angular ad component at module all of these are actually decorators so I'm going to create a second load data function and then also add this loading decorator and we can use this Json placeholder different API let's go to guide and then I will find another API let's copy this line and then replace that with this endpoint next Once you have this loading decorator it will appear uh it will make the spinner appear but I'm just going to remove that to demonstrate it so once I save everything um we will we'll actually create a new uh button there and then we will call that second load data function so I'm going to use this button component and then use the matte dash button webstorm is nice it automatically inputs that matte button module in app module we use the click event and call that function once I refresh this page actually we need to make the network to no throttling and you see the second button appearing when I click on it it will call the API but it's too quick so um you know the spinner might not appear for a long time but spinner is not appearing because we don't have that loading decorator used on this function so you can see load data does make the spinner appear uh and then the other function doesn't so load decorator let's add that there once it is added then we should test it with and the spinner should appear okay let's um save and refresh now when I click on load second data spinner appears and when the API call completes then it just goes away so now you can see how cool the decor is and it takes away all the you know messy code that you will have the right to create a spinner and then complete on the completion you'll have to hide it with the help of decorator you just got to basically add that loading decorator on any async function and it will do the job okay so if you really like the tutorial please give this video a thumbs up and subscribe to the channel and I'll speak to you guys in the next one cheers

Channel: Awais Mirza

Views: 4,638

Keywords: Angular, web development, Typescript tutorial, Typescript decorators

Id: MoH39DawEqk

Length: 11min 4sec (664 seconds)

Published: Sun Dec 18 2022