Episode 16 | Routing Events in Angular

hey guys this is sacred welcome to my channel say cats tutorial today we will talk about angular routing events when working with angular routing it is very useful to be able to respond to routing events the most obvious and useful being when the router changes once you have a reference to the router for your application you can subscribe to its events which is actually an observable this observable will emit a route event whenever applicable that you can subscribe or listen for being an observable you can subscribe to it in multiple places now let me show you an example first I will create a constructor here and in the constructor I will take a private variable of route [Music] let's add the library now here router dot events so that is the property that we need to subscribe to dot subscribe then in the result will have the event I [Music] will just console.log now let's see what is there in our console log so in the console you can see there are several router lifecycle events like navigation start router recognized gods check start etcetera etcetera now here couple of routing events are newly introduced in angular 5 I will definitely mark those but let's start with navigation start navigation start is triggered when a navigation is started that means if you go to some routing the first event navigation start will be triggered and when the navigation will be completed that time navigation end will be triggered in between there are a couple of checks that we can hook to the sequence of these routing events are very similar to this sequence you can see navigation start then routes recognized then guards check start then child activation start activation start guards check end result start result end activation end child activation and the negation end so the second one routes recognized is to recognize if the route is actually exist in our application if routes are not recognized then angular will trigger another event which is navigation error so if there is any navigation error that means the route does not exist in our application also any other navigation related errors are handled via navigation error event if user cancels some navigation or by any guard the navigation is rejected then also navigation cancel event will be triggered for example if I go to news here we are protecting upcoming route so if I click here see I am unable to go to upcoming doubt and in the console you can see navigation cancel event has been triggered because we don't have the permission to go to that page so navigation has been cancelled by angular router after navigation start and routes recognized event we can see we have guards check start that means angular will check if the router is protected by any god or not if it is protected then it will evaluate the condition and if it returns true then it will allow the router to go to that page otherwise it will cancel the navigation so in our case we have a guards check start event which will trigger the can activate or can deactivate or can't I'll activate function and after evaluation of that function it will trigger guards check end now if I open God's check end event then you can see it has a property should activate and in our case the value is false that means the god has evaluated the function and it has returned false that means it will not allow you to go to that page and it has prevented you and after that it has triggered navigation canceled after guards check start we can see there are two events child activation start and activation start before we know these two events we need to know about resolve words routing resolvers are such interfaces which we need to implement and use in our routing configurations so here we don't have any resolver yet but if this component has any dependency which has to be resolved before the instance is created for this component then we have to use a result property for this route so using that result property it will fetch the data or it will prepare the data before the component is initiated and that value can be injected to the component now child activation start and activation start represents the start of end of the result phase of routing next we have result start and result end events result start triggers the result phase of a doubting where as a result end ends the result phase of a doubting as per documentation these two events are experimental hence the timing of these two events may vary among all these routing events child activation start activation start activation end and child activation end our part of angular 5 release angular router is reactive we can implement more logic using rxjs for example if we want to filter just navigation start and navigation end event then we can filter out those events using our X J's filter function have a look here [Music] so if I write filter event where event is instance of navigation start or even tis the instance of navigation end now let's add rxjs filter and the variation start and navigation end save it and let's see what is there in browser console alright now we can see just two events one is navigation start another one is navigation end so that way we can filter a specific type of routing event in real scenarios what we can do if we want to show some spinner or some loader we can add it here on navigation start and [Music] on end of the navigation we simply can hide the loader so there are tons of ideas that you can implement using this event routings so yeah that's it for today if you got any question you can ask in the comment section and if you liked the video then don't forget to share or hit the like button thank you guys thanks for watching [Music]

Channel: Saikat's Tutorial

Views: 5,302

Keywords: Routing Events, Routing, Angular, Angular 5, angular 6, angular 4, angular router

Id: hjULAJtWhFE

Length: 11min 21sec (681 seconds)

Published: Fri Jul 27 2018