1
00:00:00,080 --> 00:00:04,180
In this lecture, we are going to retrieve the data outside of the outlet.

2
00:00:04,190 --> 00:00:08,540
As we've learned, Angular doesn't make it easy to grab this information.

3
00:00:08,570 --> 00:00:11,900
One trick to get the data is through angular events.

4
00:00:11,930 --> 00:00:17,930
In the authentication service, we're filtering the events emitted by the router to the navigation and

5
00:00:17,930 --> 00:00:18,710
event.

6
00:00:18,740 --> 00:00:22,580
The next step is to start grabbing the data in the pipeline.

7
00:00:22,580 --> 00:00:23,810
We will add the map.

8
00:00:23,840 --> 00:00:24,770
Operator.

9
00:00:26,920 --> 00:00:27,880
In this map.

10
00:00:27,910 --> 00:00:32,380
Operator, We will add an arrow function that accepts the event object.

11
00:00:34,630 --> 00:00:39,100
For this example, it's not notrillionequired to accept the event object.

12
00:00:39,130 --> 00:00:41,680
We're not interested in the event anymore.

13
00:00:41,710 --> 00:00:46,270
We're using the event to wait for the router to finish navigating to a page.

14
00:00:46,300 --> 00:00:52,730
At this point we should be able to grab the data from a route without unexpected behavior from the router.

15
00:00:52,750 --> 00:00:58,120
We are going to return the this dot route dot firstchild property.

16
00:01:00,330 --> 00:01:04,129
We are completely changing the value pushed from the observable.

17
00:01:04,140 --> 00:01:09,730
If you can recall, the root object is an instance of the activated root service.

18
00:01:09,750 --> 00:01:16,170
The activated root service will store information about the current root the user is on from this service.

19
00:01:16,200 --> 00:01:18,920
We are grabbing the first child property.

20
00:01:18,930 --> 00:01:22,470
Initially, the router creates a tree of roots.

21
00:01:22,500 --> 00:01:26,350
It's a representation of the root activated by our app.

22
00:01:26,370 --> 00:01:32,350
We haven't talked about children's roots, but it's possible to create roots from within a root.

23
00:01:32,370 --> 00:01:36,180
As a result, we will get a nested tree of roots.

24
00:01:36,210 --> 00:01:40,920
The activated root service will return the entire tree of Roots.

25
00:01:40,950 --> 00:01:46,800
We're not interested in the entire list of roots by accessing the first child property.

26
00:01:46,830 --> 00:01:49,920
We are accessing the first child in the tree.

27
00:01:49,950 --> 00:01:52,160
The rest of the roots can be ignored.

28
00:01:52,170 --> 00:01:55,470
Let's check out the console in the developer tools.

29
00:01:57,350 --> 00:02:03,230
To our surprise, we will be returned Another instance of the activated root object.

30
00:02:03,260 --> 00:02:08,090
The Tree of Roots I mentioned earlier is a tree of activated root objects.

31
00:02:08,120 --> 00:02:12,480
If we look inside this object, we will find the data observable.

32
00:02:12,500 --> 00:02:17,000
Unlike before, this observable will contain the data from the root.

33
00:02:17,030 --> 00:02:21,590
We can subscribe to this observable to gather the data related to a root.

34
00:02:21,620 --> 00:02:23,660
Let's head back to the editor.

35
00:02:25,750 --> 00:02:27,790
We are already in a pipeline.

36
00:02:27,790 --> 00:02:31,790
We need to subscribe to an observable from within an observable.

37
00:02:31,810 --> 00:02:35,080
Luckily we have the knowledge to solve this problem.

38
00:02:35,080 --> 00:02:39,210
There are a set of operators for subscribing to an inner observable.

39
00:02:39,220 --> 00:02:43,580
I think the switchmap operator will be perfect for this scenario.

40
00:02:43,600 --> 00:02:48,670
As a refresher, the Switchmap operator will subscribe to an observable.

41
00:02:48,700 --> 00:02:56,590
Its value will be pushed onto the next operator or subscription if a new value is pushed into the switchmap

42
00:02:56,620 --> 00:03:00,240
operator, the previous observable will be completed.

43
00:03:00,250 --> 00:03:03,820
Lastly, it will subscribe to the new observable.

44
00:03:03,850 --> 00:03:08,580
Therefore, we will never have more than one inner subscription at a time.

45
00:03:08,590 --> 00:03:15,910
At the top of the file, import the Switchmap operator from the Rxjs slash operators package.

46
00:03:18,000 --> 00:03:21,390
Back in the pipe function, we will add the switch map.

47
00:03:21,420 --> 00:03:22,380
Operator.

48
00:03:24,420 --> 00:03:29,160
Next we will pass in an arrow function that accepts the route object.

49
00:03:31,320 --> 00:03:35,700
Lastly, we will return the route data observable.

50
00:03:39,090 --> 00:03:42,910
TypeScript will throw an error at us to understand why.

51
00:03:42,930 --> 00:03:47,970
Let's hover our mouse over the first child property, according to the editor.

52
00:03:48,000 --> 00:03:52,230
This property will hold an activated route object or null.

53
00:03:52,260 --> 00:03:58,590
TypeScript is throwing an error because we will not be able to access the data observable on a null

54
00:03:58,590 --> 00:03:59,430
value.

55
00:03:59,460 --> 00:04:05,040
We can avoid this error by adding the optional chain operator after the route object.

56
00:04:05,070 --> 00:04:08,280
However, this will not solve all our issues.

57
00:04:08,310 --> 00:04:12,880
It is possible we may receive a null value if that's the case.

58
00:04:12,900 --> 00:04:15,810
The Switchmap operator will throw an error.

59
00:04:15,840 --> 00:04:17,410
This can break our app.

60
00:04:17,430 --> 00:04:23,580
To avoid this issue, we should return a fallback observable after the return value.

61
00:04:23,610 --> 00:04:26,670
We will add the nullish coalescing operator.

62
00:04:28,870 --> 00:04:33,040
The knowledge Coalescing operator is a new feature in JavaScript.

63
00:04:33,070 --> 00:04:36,760
Recently, Angular added support for this operator.

64
00:04:36,790 --> 00:04:41,470
This operator will check if the value on the left is null or undefined.

65
00:04:41,500 --> 00:04:46,060
If the value is not empty, the operator will return the value.

66
00:04:46,210 --> 00:04:53,140
Otherwise it will return the value to the right of the operator on the right side of the operator.

67
00:04:53,140 --> 00:04:56,830
We will return the of operator with an object.

68
00:04:58,910 --> 00:05:02,650
The of operator will create a new observable.

69
00:05:02,660 --> 00:05:05,580
It will push the value we pass into it.

70
00:05:05,600 --> 00:05:10,700
In this example, we are creating an observable that pushes an empty object.

71
00:05:10,730 --> 00:05:16,670
Let's update this object to contain the auth only property with a value of false.

72
00:05:18,900 --> 00:05:21,570
We will assume that data from the root is empty.

73
00:05:21,600 --> 00:05:25,860
This operator needs to be imported at the top of the file.

74
00:05:25,860 --> 00:05:29,970
Import the of operator from the rxjs package.

75
00:05:32,150 --> 00:05:34,190
Let's give our app a test.

76
00:05:35,610 --> 00:05:43,380
If we navigate from page to page, the data object gets logged on the manage page, the auth only property

77
00:05:43,380 --> 00:05:44,400
will appear.

78
00:05:44,520 --> 00:05:45,150
Awesome.

79
00:05:45,150 --> 00:05:47,010
It's exactly what we wanted.

80
00:05:47,040 --> 00:05:52,770
It was a lot of work to get to this value, but we can finally redirect the user if they're on a page

81
00:05:52,770 --> 00:05:54,700
that requires authentication.

82
00:05:54,720 --> 00:05:56,730
Let's go back to the editor.

83
00:05:58,290 --> 00:06:05,100
At the top of the class, we will define a property called redirect with an initial value of false.

84
00:06:07,210 --> 00:06:11,410
We are going to keep track of routes, data from within the service.

85
00:06:11,440 --> 00:06:17,590
Next, let's go back to the route events observable inside the subscribe function.

86
00:06:17,620 --> 00:06:24,310
We will replace the console dot log function with an arrow function that accepts the data argument.

87
00:06:26,470 --> 00:06:33,460
Inside this function, we will set the redirect property to the data dot auth only property.

88
00:06:35,580 --> 00:06:39,190
It's possible this value may be null or undefined.

89
00:06:39,210 --> 00:06:43,440
If that's the case, we will add the nullish coalescing operator.

90
00:06:43,470 --> 00:06:47,280
The value will be false if we can't retrieve the data.

91
00:06:49,530 --> 00:06:53,700
The last step is to update the log out function in the service.

92
00:06:53,730 --> 00:06:58,290
We will wrap the navigate by URL function with a conditional statement.

93
00:06:58,320 --> 00:07:01,860
We will check if the redirect property is truthy.

94
00:07:03,950 --> 00:07:07,760
Time to test our app, refresh the page in the browser.

95
00:07:09,000 --> 00:07:11,910
I'm going to log out from the about page.

96
00:07:14,060 --> 00:07:17,780
As I do so I'm not redirected to the home page.

97
00:07:17,780 --> 00:07:20,120
It's the behavior we were looking for.

98
00:07:20,150 --> 00:07:21,710
I will log in again.

99
00:07:23,210 --> 00:07:25,840
This time I'm on the manage page.

100
00:07:25,850 --> 00:07:29,870
If I were to log out, I'm redirected to the home page.

101
00:07:29,870 --> 00:07:32,840
We're finally finished with redirecting the user.

102
00:07:32,870 --> 00:07:37,180
We've refined the log out behavior by adding data to a route.

103
00:07:37,190 --> 00:07:40,930
In the next lecture, we will continue learning about the router.

104
00:07:40,940 --> 00:07:42,290
I'll see you there.