1 00:00:00,180 --> 00:00:06,210 In this lecture, we are going to begin retrieving a roots data, as we learned earlier, the router 2 00:00:06,210 --> 00:00:09,330 does not readily provide us with the data from the Root. 3 00:00:09,660 --> 00:00:14,130 It's because our service is outside of the router outlet directive. 4 00:00:14,430 --> 00:00:15,480 It is a gotcha. 5 00:00:15,510 --> 00:00:16,770 We should be aware of. 6 00:00:17,160 --> 00:00:22,110 For this entire lecture, we will be working inside the authentication service. 7 00:00:24,580 --> 00:00:29,770 The solution to our problem is through the router throughout the lifetime of our app. 8 00:00:29,860 --> 00:00:33,910 The router emits UV vents whenever the user navigates around the app. 9 00:00:34,390 --> 00:00:39,220 Events can be emitted by the user's actions or when we force them to navigate. 10 00:00:39,520 --> 00:00:44,050 During these events, we can access information about the current route. 11 00:00:44,350 --> 00:00:50,080 We will solve our issue by listening to these events inside the constructor function. 12 00:00:50,230 --> 00:00:55,060 We are going to subscribe to the this router events object. 13 00:00:57,470 --> 00:01:04,160 Every time the router experiences changes, it'll emit events, believe it or not, there are dozens 14 00:01:04,160 --> 00:01:07,430 of possible events that can be emitted from the router. 15 00:01:07,730 --> 00:01:13,520 Let's pass in the console log function to check out the data we will receive from this event. 16 00:01:16,040 --> 00:01:19,580 In the browser, refresh the page with the console opened. 17 00:01:22,090 --> 00:01:26,830 Astonishingly, we will receive about a dozen events logged in the console. 18 00:01:27,100 --> 00:01:29,800 There's not enough time to go over each event. 19 00:01:30,160 --> 00:01:36,250 The main goal of this lecture is to redirect the user if they're on a page that requires authentication. 20 00:01:36,700 --> 00:01:40,120 The navigation we care about is called navigation end. 21 00:01:40,510 --> 00:01:45,070 This event gets emitted whenever the router is finished navigating to a route. 22 00:01:45,520 --> 00:01:50,200 We don't want to check the router until the user has finished navigating to a page. 23 00:01:50,470 --> 00:01:56,290 After this event has been emitted, we can attempt to retrieve the data related to the current route. 24 00:01:56,620 --> 00:01:57,820 Let's give it a try. 25 00:01:58,060 --> 00:02:04,240 Back in the ED, we are going to update the import statement for the angular root package. 26 00:02:04,450 --> 00:02:07,360 We will include the navigation end class. 27 00:02:09,800 --> 00:02:13,040 We are importing this class to help us check the event. 28 00:02:13,310 --> 00:02:14,750 That can sound confusing. 29 00:02:14,960 --> 00:02:18,230 It'll be easier to understand once we've written the code. 30 00:02:18,530 --> 00:02:20,090 Just follow along with me. 31 00:02:20,420 --> 00:02:27,500 Next, we are going to import an operator called Filter from the Orange Juice Operators package. 32 00:02:29,920 --> 00:02:35,800 Back in the constructor function, we will change the pipe function before subscribing to the events 33 00:02:35,800 --> 00:02:36,610 observable. 34 00:02:39,110 --> 00:02:42,260 The events of survival will emit several events. 35 00:02:42,470 --> 00:02:45,440 We're not interested in handling every single event. 36 00:02:45,710 --> 00:02:52,760 Unfortunately, Angular does not provide a way to listen to a specific event since the events property 37 00:02:52,760 --> 00:02:53,870 isn't observable. 38 00:02:53,990 --> 00:02:58,220 We can use operators to help us listen to a specific event. 39 00:02:58,730 --> 00:03:02,300 The filter operator can perform this action efficiently. 40 00:03:02,510 --> 00:03:09,020 We can use this operator to perform a conditional check on a value pushed by and I'm survival if we're 41 00:03:09,020 --> 00:03:10,640 not interested in the value. 42 00:03:10,730 --> 00:03:15,140 The filter operator will not push the value onto the next operator. 43 00:03:15,380 --> 00:03:21,140 Therefore, the subscriber will never receive the value inside the filter operator. 44 00:03:21,290 --> 00:03:25,400 Let's pass in an error function that accepts the event object. 45 00:03:27,940 --> 00:03:30,580 The function must return a Boolean value. 46 00:03:30,820 --> 00:03:34,180 It does not need to return the event object itself. 47 00:03:34,540 --> 00:03:41,200 The filter operator will pass on the value if we return a true value for the return value. 48 00:03:41,320 --> 00:03:46,510 We will check if the event object is an instance of the navigation and class. 49 00:03:49,070 --> 00:03:52,880 Filters are how we can listen to specific events on the router. 50 00:03:53,150 --> 00:03:58,820 It's likely you'll need to use the filter operator whenever you're listening to events on the router. 51 00:03:59,150 --> 00:04:01,970 Let's give our filter a test in the browser. 52 00:04:02,000 --> 00:04:03,320 Refresh the page. 53 00:04:05,850 --> 00:04:08,130 And the Council of the Developer Tools. 54 00:04:08,250 --> 00:04:11,400 A single event will get log on every navigation. 55 00:04:11,670 --> 00:04:14,550 The event should be the navigation and event. 56 00:04:14,850 --> 00:04:21,149 All other events are ignored, which is what we want, despite not returning the event object from the 57 00:04:21,149 --> 00:04:22,380 filter operator. 58 00:04:22,440 --> 00:04:24,390 It was automatically passed on. 59 00:04:24,630 --> 00:04:27,180 We successfully filtered the events. 60 00:04:27,630 --> 00:04:29,730 We can move on to grabbing the data. 61 00:04:29,910 --> 00:04:33,840 Let's begin capturing the data from a route in the next lecture.