Angular route loading indicator

they say spot 56 of angular credit oh yeah in this video we'll discuss how to display a loading indicator if there is a delay navigating from one route to another route in an angular application at the moment when we navigate to the list route it takes at least two seconds to prefetch the data required for this list route that's because on this list route we have a route resolver configured we configured this route resolver in part 54 of this video series so here is what we want to do during the two seconds wait time while the route guard is busy retrieving the data required for the route we want to display a loading indicator so the end user knows the application is busy processing his request and he does not end up clicking on the links multiple times thinking that the application is not doing anything to implement the loading indicator we're gonna make use of the angular router navigation events but discuss these navigation events in our previous video in part 55 these navigation events range from when the navigation starts and ends to many points in between so here is what we want to do when the navigation starts we want to display the loading indicator and when the navigation ends we want to hide the loading indicator to be able to react and execute some code in response to these router navigation events we need to subscribe to the angular router events observable the question that we get at this point is where do we subscribe to the router events observable well if you look at our application this is a root component app component and we have all our routes and the router outlet directive within our app component this component is always rendered by the browser and depending on the route that is active the Associated component butan plate is rendered at the location where we have this router outlet directive since this component is aware of any route changes we are going to use this component to subscribe to the router remains absorber so the first thing that I am going to do is import angular navigation start and navigation end evens from the angler router package so we want to import router navigation start and navigation end next with another component class let's include a constructor so we can inject angler router we don't need this title property anymore so let's get rid of that now let's inject this router into a constructor so we can subscribe to its router events observable so this is of type router and within the constructor let's subscribe to its events absorber so they stored underscore outer dot events dot subscribe so every time a navigation event is emitted by the angular router we are notified of that event because we are subscribed so let's specify a callback function here so we can execute some code in response to those navigation events the even that is raised is passed as a parameter to this callback function I'm going to call it router event and this is of type event so let's also import event from the angular router package now we need a property within this component to keep track off when to show and hide the loading indicator I'm going to call this property show loading indicator and I'm going to set its default value to true now in the SUBSCRIBE callback method let's check if the router event is navigation start and the way we do that is like this F router event that is the parameter that is coming into the subscriber callback method is an instance of navigation start then what do we want to do we want to set this property show loading indicator to true on the other hand if the event that is emitted is navigation and then we want to turn off the loading indicator so let's set this property to false in the view template we are going to bind to this show loading indicator property to show and hide the loading indicator first let's format this code a bit so we don't have all those red squigglies now in the view template let's include a development and use the ng of structural directive and bind to our show loading indicator property and within the development for now let's display this message loading let's save all these changes and take a quick look at the browser notice now when we navigate to the list route we see this loading message while we are waiting for the data once the data is available the loading message disappears and we see the full list of employees but this loading text message is not that impressive let's display a loading spinner instead we're going to use CSS animations to get the effect of a loading spinner we need to place the CSS within the app component CSS file I'll make this CSS available on my blog in case you need it here we have a CSS class called spinner so within the HTML instead of this loading text let's include that spinner class on the development notice now when we navigate to the list route we see the spinner while we are waiting for the data once the data becomes available the spinner disappears and we see the full list of employees at the moment if you notice the spinner is spinning anti-clockwise if you want that to spin clockwise within the CSS change the rotation from minus 360 degrees to 360 degrees similarly we can also control the spinner color the spinner radius at the moment we have set it to 50% so we have a circle if you don't want a circle change it to something else other than 50 I changed it to 40% similarly we can also control the spinner speed and where you want the spinner to be positioned using top and left properties let's save these changes and see the effect that we have notice now the spinning clockwise instead of anti-clockwise now if you're looking for more spinners there are many websites on the internet that offer free CSS spinners loading dot io is one such website so at this path four slash CSS notice we have many spinners now to be able to use these spinners on our page we have to customize them a little let's use this spinner we need this HTML and CSS first let's copy and paste the HTML so instead of this div let's paste the HTML that we have just copied now let's copy the CSS and paste it within our app component CSS file now we need to change a few properties here first of all we don't need this display property so let's remove it altogether and I'm going to change the value of this position property from they're too fixed now if you notice the background color of the spinner is white what we want to do is change it to this primary bootstrap color blue so let's include its color code which is this one let's save our changes and see the effect we get notice now the loading indicator is always displayed that's because at the moment the development that displays the loading indicator we are not binding this dev to this show loading indicator property we'll do that in just a bit but before that let's display this loading indicator at the centre of the page instead of at this location right here for that I'm going to make use of top and left properties so within our CSS let's use the top property and set it to 50% similarly let's set the left property also to 50% notice now the loading spinner is displayed in the center of the page but we don't want this loading spinner to be displayed always so let's bind this development that displays the loading spinner to this show loading indicator property so first let's format this code and then let's use the ng of structural directive and bind this dev to show loading indicator property notice now the loading indicator is not always displayed it's only displayed when there is a delay when navigating from one route to another route at the moment there is a small issue with our loading spinner first let's understand what the issue is and we'll discuss how to fix it in just a bit now let's navigate to the create route and make this form dirty and at this point when we try to navigate to the list route we have this confirmation from the route card now when we click cancel navigation cancel event is raised and notice on navigation cancel event they still have this loading spinner displayed and we don't want that happen we want to turn off the spinner when the route navigation is canceled so in automotive class just like how we have imported navigation start and navigation and let's import navigation cancel event as well and we also want to turn off the spinner when there is an error so let's also import navigation error event so all that is left to do is set this property show loading indicator to false if the router event that is emitted is navigation and navigation cancel or navigation error finally let's check for navigation error let's save our changes and take a quick look at the browser notice now when we make the form dirty try to navigate to the list rod we get the confirmation when we click cancel we don't have the loading spinner displayed on the other hand if we click OK on the confirmation we have the loading spinner displayed while we are waiting for the data showing and hiding loading spinner is easy but in our root component we create a boolean property and initialize it with the default value of true on navigation start event they said that property to true on navigation and error are canceled they said that same property to false and within our view template we bind the development that displays the loading spinner to this property show loading indicator that's it in this video thank you for watching and have a great day

Channel: kudvenkat

Views: 48,713

Keywords: angular resolve loading indicator, angular display loading spinner, angular 2 loading spinner example, angular 2 loading overlay, angular2 loading spinner overlay, angular loading overlay example, angular loading animation, angular route loading spinner, angular 5 loading spinner example, angular 5 loading indicator, angular 5 loading page, angular 5 loading animation, angular 5 loading icon, angular 5 loading overlay, angular 5 loading spinner http

Id: V_64FqedqW0

Length: 12min 5sec (725 seconds)

Published: Mon Jun 04 2018