1
00:00:00,120 --> 00:00:06,630
In this lecture, we are going to learn how to subscribe to an observable from a template angular makes

2
00:00:06,630 --> 00:00:08,130
this process painless.

3
00:00:08,340 --> 00:00:09,420
Let's get started.

4
00:00:09,780 --> 00:00:14,670
The goal is to render links based on the user's current authentication status.

5
00:00:15,030 --> 00:00:19,260
The links for the navigation can be found in the navigation component.

6
00:00:19,560 --> 00:00:22,740
Open the navigation component class file.

7
00:00:25,320 --> 00:00:28,590
We created a service for exposing this information.

8
00:00:28,860 --> 00:00:35,700
Let's inject it into our class at the top of the file import, the authentication service.

9
00:00:38,220 --> 00:00:42,570
Next, we will inject this service into the constructor function.

10
00:00:42,960 --> 00:00:46,230
The name of the property will be called authentication.

11
00:00:48,810 --> 00:00:53,610
We should subscribe to the is authenticated observable from this service.

12
00:00:53,970 --> 00:01:00,630
It'll inform our component of the user's authentication status inside the constructor function.

13
00:01:00,780 --> 00:01:06,330
We will subscribe to the is authenticated observable from the authentication service.

14
00:01:08,900 --> 00:01:14,630
For the observer, we will pass in a function that accepts the value pushed from the observable.

15
00:01:14,960 --> 00:01:17,990
We will refer to the value as status.

16
00:01:20,490 --> 00:01:27,660
Lastly, we should locally store this value in our class at the top of the class, create a property

17
00:01:27,660 --> 00:01:31,620
called is authenticated with a default value of false.

18
00:01:34,210 --> 00:01:40,510
Inside the subscriber, we will set the is authenticated property to the status argument.

19
00:01:43,220 --> 00:01:50,330
Our component class is ready, we can move on to updating the template, open the navigation component

20
00:01:50,330 --> 00:01:51,320
template file.

21
00:01:53,920 --> 00:02:00,220
In the template, you can find the links for the navigation menu under a comment that says navigation

22
00:02:00,220 --> 00:02:03,010
links, there are a total of four links.

23
00:02:03,280 --> 00:02:05,800
The first three links should be toggled.

24
00:02:06,160 --> 00:02:09,940
The log and links should be rendered when the user is not logged in.

25
00:02:10,270 --> 00:02:16,330
As for the manage and upload links, they should be rendered when the user is authenticated into our

26
00:02:16,330 --> 00:02:16,720
app.

27
00:02:17,380 --> 00:02:23,410
We can toggle the visibility of the links by using structural directives on the first link.

28
00:02:23,500 --> 00:02:26,230
We will apply the NGF Directive.

29
00:02:28,790 --> 00:02:33,140
The condition for this directive will be the is authenticated property.

30
00:02:33,440 --> 00:02:36,110
We want to check if this property is false.

31
00:02:38,110 --> 00:02:45,250
We've discussed how to apply conditional rendering, but we never went beyond the NGF directive, in

32
00:02:45,250 --> 00:02:51,850
some situations, we may want to render a different set of tactics if the condition in the energy if

33
00:02:51,850 --> 00:02:56,530
directive fails angular supports else conditions in templates.

34
00:02:56,830 --> 00:03:01,660
It's similar to how else blocks work in JavaScript after the condition.

35
00:03:01,810 --> 00:03:05,320
We can add a semicolon, followed by the else keyword.

36
00:03:07,900 --> 00:03:15,010
After the last keyword, we need to specify a template before we specify the template, we should create

37
00:03:15,010 --> 00:03:15,730
a template.

38
00:03:16,060 --> 00:03:22,180
We're going to wrap the list item elements surrounding the links with the N.G. template element.

39
00:03:26,460 --> 00:03:32,250
Next, we need to add a template reference variable to the energy template element.

40
00:03:32,610 --> 00:03:36,150
We will call the template reference authenticated links.

41
00:03:38,810 --> 00:03:44,350
By creating a template reference variable, we can pass it into the health condition.

42
00:03:46,860 --> 00:03:53,670
The NGF directive will render the template if the condition fails, the health template is entirely

43
00:03:53,670 --> 00:03:56,340
optional by including this keyword.

44
00:03:56,370 --> 00:04:00,300
We can choose to render a different template if a condition fails.

45
00:04:00,600 --> 00:04:02,730
We're finished updating the template.

46
00:04:03,030 --> 00:04:05,460
Let's test the app in our browser.

47
00:04:08,130 --> 00:04:12,900
The links in the menu should appear based on the user's authentication status.

48
00:04:13,170 --> 00:04:15,570
You should be able to view the correct links.

49
00:04:15,840 --> 00:04:17,730
I'm still logged in to my account.

50
00:04:18,000 --> 00:04:22,710
Therefore, I'll be able to view the manage and upload links.

51
00:04:23,010 --> 00:04:25,350
You may see a different set of links.

52
00:04:25,890 --> 00:04:30,510
Our solution works, but there's a better approach to implement this solution.

53
00:04:30,810 --> 00:04:37,650
Back in our editor, we are subscribing to the is authenticated, observable straight from the constructor

54
00:04:37,650 --> 00:04:38,160
function.

55
00:04:40,780 --> 00:04:44,830
Next, we had to store the value pushed by the observable.

56
00:04:45,130 --> 00:04:51,820
It's not ideal to write these lines of codes and every component angular defines a pipe for subscribing

57
00:04:51,820 --> 00:04:54,370
to an observable from within the template.

58
00:04:54,700 --> 00:04:59,530
Let's switch back to the template file in the NGF directive.

59
00:04:59,680 --> 00:05:02,200
We're going to apply the async pipe.

60
00:05:04,840 --> 00:05:11,380
Instead of checking the is authenticated property, we will check the is authenticated observable.

61
00:05:13,850 --> 00:05:16,370
Straight away, we will receive an error.

62
00:05:16,700 --> 00:05:20,390
The error is not so clear if we are to view it in our ED.

63
00:05:20,720 --> 00:05:26,000
The problem with our code has to do with the value accepted by the async pipe.

64
00:05:26,450 --> 00:05:29,960
This pipe can be passed any promise or observable.

65
00:05:30,350 --> 00:05:33,140
However, we are providing an observable.

66
00:05:33,740 --> 00:05:40,310
The error stems from the negation operator before angular passes on the observable to the pipe.

67
00:05:40,580 --> 00:05:47,930
Existing operators will be applied to the value if we want to apply the negation operator after a value

68
00:05:47,930 --> 00:05:49,010
has been pushed.

69
00:05:49,280 --> 00:05:54,020
We need to wrap the is authenticated, observable with parentheses.

70
00:05:56,530 --> 00:06:02,770
By doing so, Angular will pass on the observable to the async pipe behind the scenes.

71
00:06:02,950 --> 00:06:09,700
The async pipe will subscribe to the observable values pushed by the observable will be given to the

72
00:06:09,700 --> 00:06:14,260
directive or expression after receiving the emitted value.

73
00:06:14,440 --> 00:06:18,850
The logical not operator will check if the value is false.

74
00:06:19,510 --> 00:06:21,970
The async pipe is super helpful.

75
00:06:22,210 --> 00:06:25,830
We can use it to subscribe to observables from our templates.

76
00:06:26,230 --> 00:06:28,270
We're not limited to observables.

77
00:06:28,450 --> 00:06:31,420
We can use this operator with promises.

78
00:06:31,690 --> 00:06:37,120
If we pass in a promise, the value resolved by the promise will be returned.

79
00:06:37,750 --> 00:06:43,180
We can safely remove the subscription from our class back in the class file.

80
00:06:43,270 --> 00:06:48,130
We will remove the Subscribe button and is authenticated property.

81
00:06:50,740 --> 00:06:53,020
Let's check out the app in the browser.

82
00:06:55,550 --> 00:06:57,860
We get the same behavior as before.

83
00:06:58,190 --> 00:07:04,910
Great, refreshing the page will yield the same results were able to render our components based on

84
00:07:04,910 --> 00:07:07,070
the user's authentication status.

85
00:07:07,400 --> 00:07:12,610
Firebase will handle persisting the authentication across page refreshes.

86
00:07:13,010 --> 00:07:17,960
The angular fire package will expose this information via an observable.

87
00:07:18,560 --> 00:07:23,720
Whenever possible, we should use the async operator to handle subscriptions.

88
00:07:23,720 --> 00:07:24,650
In the templates.

89
00:07:24,950 --> 00:07:28,520
I provide a link to the documentation for the async pipe.

90
00:07:28,910 --> 00:07:35,300
Check it out if you'd like to learn more in the following lecture, we are going to continue authenticating

91
00:07:35,300 --> 00:07:36,740
the user in our app.