1
00:00:03,680 --> 00:00:11,610
Now that you have had your first introduction to Reactive Programming, RxJS,

2
00:00:11,610 --> 00:00:14,880
and the use of the observer pattern and

3
00:00:14,880 --> 00:00:21,165
how Angular leverages the observer pattern and supports Reactive Programming,

4
00:00:21,165 --> 00:00:24,600
let's move on to our very first exercise to get our feet

5
00:00:24,600 --> 00:00:29,315
wet using the observables in Angular.

6
00:00:29,315 --> 00:00:35,950
In this exercise, we're going to update our services to make use of observables,

7
00:00:35,950 --> 00:00:43,999
because when we move on to the next module where we will look at HTTP support in Angular,

8
00:00:43,999 --> 00:00:49,915
we will immediately understand that HTTP support in Angular is based around observables.

9
00:00:49,915 --> 00:00:54,485
So, it is a good idea for us to get ourselves

10
00:00:54,485 --> 00:00:59,870
acquainted with using observables in this lesson itself.

11
00:00:59,870 --> 00:01:04,770
So, we will update the services to export observables.

12
00:01:04,770 --> 00:01:08,479
Thereafter, within our components,

13
00:01:08,479 --> 00:01:11,270
we will subscribe to these observables and

14
00:01:11,270 --> 00:01:15,190
obtain the data required for rendering the views.

15
00:01:15,190 --> 00:01:19,340
Let's go on to the exercise next.

16
00:01:19,340 --> 00:01:21,680
You must be wondering,

17
00:01:21,680 --> 00:01:25,390
how do we make use of RxJS within Angular,

18
00:01:25,390 --> 00:01:28,510
and is it already available to us?

19
00:01:28,510 --> 00:01:31,730
So what you will notice is that with the Angular CLI,

20
00:01:31,730 --> 00:01:34,480
when you scaffold out your Angular application,

21
00:01:34,480 --> 00:01:37,040
RxJS is automatically included in there.

22
00:01:37,040 --> 00:01:39,560
So, if you go to the package.json file,

23
00:01:39,560 --> 00:01:42,795
you would notice that within the dependencies,

24
00:01:42,795 --> 00:01:48,900
the RxJS library is already included within your application.

25
00:01:48,900 --> 00:01:53,155
So, whatever you need to use from RxJS is already available to you.

26
00:01:53,155 --> 00:02:00,215
So we can go ahead and use the RxJS library right away within our Angular application.

27
00:02:00,215 --> 00:02:03,735
If you are building your Angular application from scratch,

28
00:02:03,735 --> 00:02:08,450
then you need to explicitly do an npm install of RxJS.

29
00:02:08,450 --> 00:02:11,135
Going to the dish.service.js file,

30
00:02:11,135 --> 00:02:21,080
let me first import the of

31
00:02:21,080 --> 00:02:27,750
from our 'rxjs' observables.

32
00:02:28,960 --> 00:02:32,045
We will also import- Now,

33
00:02:32,045 --> 00:02:35,235
when you use RxJS within your Angular application,

34
00:02:35,235 --> 00:02:37,330
the entire library doesn't get included.

35
00:02:37,330 --> 00:02:41,445
You can only import whatever parts that you need from the RxJS library,

36
00:02:41,445 --> 00:02:43,400
and then use it within your Angular application.

37
00:02:43,400 --> 00:02:48,680
So, when your Angular application is finally prepared for deployment,

38
00:02:48,680 --> 00:02:52,070
only those parts from RxJS that are required will

39
00:02:52,070 --> 00:02:56,030
be included within your Angular application.

40
00:02:56,030 --> 00:02:58,055
The delay operator.

41
00:02:58,055 --> 00:03:07,815
The delay operator enables us to delay the emitting of the item from our observable.

42
00:03:07,815 --> 00:03:09,780
Going into the methods,

43
00:03:09,780 --> 00:03:15,295
we will now update these methods to make use of observables,

44
00:03:15,295 --> 00:03:18,230
and we will return a promise by converting the

45
00:03:18,230 --> 00:03:21,755
observable into your promise using the toPromise operator.

46
00:03:21,755 --> 00:03:27,700
So, if you are already having components that are using promises,

47
00:03:27,700 --> 00:03:30,520
and you want to not modify the components,

48
00:03:30,520 --> 00:03:33,470
you can simply convert an observable to your promise and then

49
00:03:33,470 --> 00:03:37,890
send the promise over to your components.

50
00:03:37,890 --> 00:03:42,265
As we realized, promises will emit only one item,

51
00:03:42,265 --> 00:03:48,000
whereas you can see that observables are based on streams.

52
00:03:48,000 --> 00:03:51,350
So, that's the limitation that you'll get if you

53
00:03:51,350 --> 00:03:54,560
just use the two promise operator on observables

54
00:03:54,560 --> 00:03:58,520
and make use of it because the toPromise operator

55
00:03:58,520 --> 00:04:03,525
will enable your observable to only emit one value.

56
00:04:03,525 --> 00:04:09,350
But for the moment let's do it as the first step before we

57
00:04:09,350 --> 00:04:14,665
move into the full observable implementation of our services.

58
00:04:14,665 --> 00:04:17,820
So, going to the getDishes method,

59
00:04:17,820 --> 00:04:22,370
I'm going to return these dishes.

60
00:04:22,370 --> 00:04:27,950
So, I'm going to remove that part and then say, return of.

61
00:04:27,950 --> 00:04:31,625
If you want to emit only one value from your observable,

62
00:04:31,625 --> 00:04:33,260
you will use the of method,

63
00:04:33,260 --> 00:04:38,010
and which will take in whatever value that you want to emit in there.

64
00:04:38,010 --> 00:04:43,300
That suffices for our current application at the moment.

65
00:04:43,300 --> 00:04:46,160
So, we're going to make use of that,

66
00:04:46,160 --> 00:04:52,040
and also we want to delay the emitting of the value by two seconds.

67
00:04:52,040 --> 00:04:55,565
So, I'm going to change this part of the code to use

68
00:04:55,565 --> 00:05:01,895
the delay operator for my observable, using pipe.

69
00:05:01,895 --> 00:05:09,360
I need to convert this toPromise and emit the promise.

70
00:05:09,360 --> 00:05:14,775
So now, my getDishes method is updated to make use of an observable,

71
00:05:14,775 --> 00:05:19,665
and then convert that into a promise and then send out the promise to my component.

72
00:05:19,665 --> 00:05:22,710
So I don't need to do any updates of the component.

73
00:05:22,710 --> 00:05:31,200
Let's use the same approach to update the remaining two methods of my service here.

74
00:05:31,200 --> 00:05:34,455
So I'm just going to copy this part,

75
00:05:34,455 --> 00:05:42,225
and then update that part,

76
00:05:42,225 --> 00:05:46,140
then take the delay part of it,

77
00:05:46,140 --> 00:05:54,080
and then update this part to use the delay

78
00:05:54,080 --> 00:06:06,300
and convert this toPromise method.

79
00:06:06,300 --> 00:06:10,980
So with that, my getDish method is also updated.

80
00:06:10,980 --> 00:06:17,370
Let me do the same thing to the getFeaturedDish method.

81
00:06:17,370 --> 00:06:21,000
Again, if you want to,

82
00:06:21,000 --> 00:06:23,040
you can type out the whole thing.

83
00:06:23,040 --> 00:06:32,270
I'm just being lazy to only cut and paste and change the parts that

84
00:06:32,270 --> 00:06:42,395
I want to change and convert this toPromise method.

85
00:06:42,395 --> 00:06:52,800
That's it. My service is now updated to return promises from an observable here.

86
00:06:52,800 --> 00:06:54,405
So, with this update,

87
00:06:54,405 --> 00:06:58,620
my dish service is updated to make use of observables rather

88
00:06:58,620 --> 00:07:04,215
than directly using the values.

89
00:07:04,215 --> 00:07:10,460
Similarly, go ahead and update the leader service and the promotion service.

90
00:07:10,460 --> 00:07:13,415
You would now notice that I have already updated

91
00:07:13,415 --> 00:07:17,985
the leader service to make use of observables.

92
00:07:17,985 --> 00:07:24,380
Similarly, I have also updated the promotion service to make use of observables.

93
00:07:24,380 --> 00:07:28,200
Save the changes and let's go and take a look at our application.

94
00:07:28,200 --> 00:07:29,890
When you go to the browser,

95
00:07:29,890 --> 00:07:34,745
you would notice that your application performs exactly the same way as before

96
00:07:34,745 --> 00:07:41,010
and fetches the data from the services just like before.

97
00:07:41,010 --> 00:07:45,160
So not much of a change within your application as such.

98
00:07:45,160 --> 00:07:46,850
It performs exactly the same.

99
00:07:46,850 --> 00:07:51,035
So, notice that by substituting your promises with observables,

100
00:07:51,035 --> 00:07:55,370
there hasn't been much change within your application as you expect it.

101
00:07:55,370 --> 00:07:58,460
Now, let's go one step further.

102
00:07:58,460 --> 00:08:04,540
We will now let our services return observables,

103
00:08:04,540 --> 00:08:08,240
and we will update the components to make use of observables.

104
00:08:08,240 --> 00:08:09,835
The reason as I mentioned,

105
00:08:09,835 --> 00:08:13,790
is because when we update our services to use

106
00:08:13,790 --> 00:08:18,420
the HTTP service to go to a server to fetch the data,

107
00:08:18,420 --> 00:08:25,345
then we would note that in Angular the HTTP methods will return observables.

108
00:08:25,345 --> 00:08:30,260
The services can simply pass the observables on to our components and let

109
00:08:30,260 --> 00:08:33,080
the components subscribe to these observables and make use

110
00:08:33,080 --> 00:08:36,215
of the data that they obtain thereby.

111
00:08:36,215 --> 00:08:41,020
So, this would be an intermediate step for us to get to that stage.

112
00:08:41,020 --> 00:08:45,275
We will get to look at HTTP in the next module.

113
00:08:45,275 --> 00:08:48,234
Returning to our services,

114
00:08:48,234 --> 00:08:52,460
you can now remove the toPromise first by removing

115
00:08:52,460 --> 00:08:55,400
the toPromise operator because we don't need it

116
00:08:55,400 --> 00:08:59,660
anymore and then we will simply remove the toPromise from this,

117
00:08:59,660 --> 00:09:04,110
import observable and then instead let

118
00:09:04,110 --> 00:09:09,044
our method return

119
00:09:09,044 --> 00:09:16,140
observables instead of promises.

120
00:09:16,140 --> 00:09:17,615
So as I mentioned,

121
00:09:17,615 --> 00:09:21,420
whatever a promise can do an observable can also do.

122
00:09:22,810 --> 00:09:28,400
So, let's update all these to return observables.

123
00:09:28,400 --> 00:09:32,695
Do the same to the remaining two services.

124
00:09:32,695 --> 00:09:36,680
You would now notice that I have also updated the leader service

125
00:09:36,680 --> 00:09:40,725
to simply return observables instead of promises,

126
00:09:40,725 --> 00:09:43,984
and also the promotion service has been correspondingly

127
00:09:43,984 --> 00:09:47,735
updated to return observable instead of promises.

128
00:09:47,735 --> 00:09:52,460
Now what this means is that we need to go and update our components

129
00:09:52,460 --> 00:09:57,590
to make use of observables rather than promises as we did earlier.

130
00:09:57,590 --> 00:10:01,885
Now for promise, we saw that we need to use the.then

131
00:10:01,885 --> 00:10:07,430
to get hold of the result when the resolve of the promise is executed.

132
00:10:07,430 --> 00:10:12,495
With an observable, the.then gets converted to.subscribe.

133
00:10:12,495 --> 00:10:16,715
The way you consume the data will remain exactly the same.

134
00:10:16,715 --> 00:10:19,890
So with that minor change within your components,

135
00:10:19,890 --> 00:10:25,480
the components will now be able to handle observables rather than promises.

136
00:10:25,480 --> 00:10:31,085
So, going to all the four components that make use of the services,

137
00:10:31,085 --> 00:10:37,185
first, let's go to the menu.component.ts file.

138
00:10:37,185 --> 00:10:39,280
In the menu.component.ts file,

139
00:10:39,280 --> 00:10:42,080
you would immediately notice the red squiggly line there,

140
00:10:42,080 --> 00:10:48,100
under the then obviously because we are not returning a promise.

141
00:10:48,100 --> 00:10:50,090
Instead we are returning an observable.

142
00:10:50,090 --> 00:10:55,245
So just convert that then to subscribe and that's it.

143
00:10:55,245 --> 00:10:59,225
Your menu component is now able to

144
00:10:59,225 --> 00:11:04,910
consume the observable values that is being emitted by the observable.

145
00:11:04,910 --> 00:11:10,890
Do the same change to the about.component.ts file,

146
00:11:10,890 --> 00:11:16,760
the dishdetail.component.ts file, and the home.component.ts file.

147
00:11:16,760 --> 00:11:22,520
After updating the remaining component Tapscott files,

148
00:11:22,520 --> 00:11:27,245
let's go and look at the behavior of our application in the browser.

149
00:11:27,245 --> 00:11:32,920
Go into the browser, you will notice no difference in the behavior of our application.

150
00:11:32,920 --> 00:11:36,170
This version of our Angular application is updated to use

151
00:11:36,170 --> 00:11:40,275
observables instead of promises.

152
00:11:40,275 --> 00:11:42,620
So, the home component here,

153
00:11:42,620 --> 00:11:46,085
about component performs exactly the same way as before,

154
00:11:46,085 --> 00:11:49,800
and the menu component does exactly the same thing.

155
00:11:49,800 --> 00:11:54,785
Also the dish detail component will behave exactly the same way as before.

156
00:11:54,785 --> 00:11:57,960
With this, we complete this exercise.

157
00:11:57,960 --> 00:12:01,430
In this exercise, we took our first steps towards using

158
00:12:01,430 --> 00:12:05,030
observables within our Angular application by updating

159
00:12:05,030 --> 00:12:08,330
the services and correspondingly the components to

160
00:12:08,330 --> 00:12:12,185
make use of observables in place of promises.

161
00:12:12,185 --> 00:12:18,640
This is a good time for you to do a git commit with the message RxJS part one.