1
00:00:03,680 --> 00:00:10,440
Now that you have gotten your feet wet with Angular observables in the previous exercise,

2
00:00:10,440 --> 00:00:11,860
you're looking back and saying,

3
00:00:11,860 --> 00:00:14,320
"Oh observables are not that bad after all,

4
00:00:14,320 --> 00:00:17,070
they are fairly straightforward to make use of."

5
00:00:17,070 --> 00:00:19,125
So, we get a bit more ambitious.

6
00:00:19,125 --> 00:00:25,080
Let's go one step further and then make use of a built-in observable within Angular.

7
00:00:25,080 --> 00:00:27,960
The params observable that comes from

8
00:00:27,960 --> 00:00:32,655
the activated route service within our router module.

9
00:00:32,655 --> 00:00:35,940
We'll now update the dish detail component,

10
00:00:35,940 --> 00:00:39,630
to make use of the params observable from

11
00:00:39,630 --> 00:00:42,770
the activator drought service to

12
00:00:42,770 --> 00:00:47,975
support some new features within our Angular application.

13
00:00:47,975 --> 00:00:52,400
Before we move on to update the dish detail component,

14
00:00:52,400 --> 00:00:57,650
I want to introduce one more method in my dish service.ts file.

15
00:00:57,650 --> 00:01:02,735
So open dish service.ts file and then we'll add a new method called

16
00:01:02,735 --> 00:01:08,060
getDishIds and this basically will

17
00:01:08,060 --> 00:01:14,715
return all the dish IDs is for all the dishes in our collection of dishes.

18
00:01:14,715 --> 00:01:17,650
So, to do that, we'll use a return

19
00:01:17,650 --> 00:01:26,535
and of method and before I do that,

20
00:01:26,535 --> 00:01:31,915
this is returning an observable.

21
00:01:31,915 --> 00:01:33,480
Of what kind?

22
00:01:33,480 --> 00:01:38,690
This is returning an observable which consists of an array of

23
00:01:38,690 --> 00:01:44,510
string and let's delay

24
00:01:44,510 --> 00:01:50,385
it by 2,000 milliseconds or two seconds.

25
00:01:50,385 --> 00:01:52,415
So, what is it that we want to return?

26
00:01:52,415 --> 00:01:54,895
We want to take the dishes array,

27
00:01:54,895 --> 00:01:58,730
extract out all the IDs from the dishes array and

28
00:01:58,730 --> 00:02:02,665
then give it to our Dish Detail component,

29
00:02:02,665 --> 00:02:06,305
because we need that within our Dish Detail component to implement

30
00:02:06,305 --> 00:02:10,365
the new feature that we are going to support in our application.

31
00:02:10,365 --> 00:02:13,725
Now, this is one way that I want to implement it.

32
00:02:13,725 --> 00:02:18,825
Later on, we can see how we can do it in a much better way,

33
00:02:18,825 --> 00:02:21,240
in one of the later exercises.

34
00:02:21,240 --> 00:02:24,680
At the moment, with the way the service is implemented,

35
00:02:24,680 --> 00:02:32,455
this is the best that I could do to implement this solution to demonstrate a new feature.

36
00:02:32,455 --> 00:02:33,850
So, within the observable,

37
00:02:33,850 --> 00:02:35,050
what I'm going to do is,

38
00:02:35,050 --> 00:02:40,070
I'm going to take the dishes array and to the dishes array.

39
00:02:40,070 --> 00:02:43,770
I'm going to use the map,

40
00:02:44,020 --> 00:02:49,670
an array operator, the JavaScript array operator map.

41
00:02:49,670 --> 00:02:51,410
So, the map operator,

42
00:02:51,410 --> 00:02:58,700
how it works is that it takes each item from the dishes array and we can map

43
00:02:58,700 --> 00:03:01,760
that item into another item and then construct

44
00:03:01,760 --> 00:03:06,195
another array and then return that modified array.

45
00:03:06,195 --> 00:03:10,520
So, for each item in my dishes array,

46
00:03:10,520 --> 00:03:14,315
I'm going to take that item and then instead

47
00:03:14,315 --> 00:03:20,510
extract the dish ID and then from the dish ID.

48
00:03:20,510 --> 00:03:25,880
So, I will be ending up constructing a new array out of it,

49
00:03:25,880 --> 00:03:28,420
which contains only the IDs,

50
00:03:28,420 --> 00:03:33,515
so an array of IDs and we already see that the IDs are string,

51
00:03:33,515 --> 00:03:37,920
that's what I'm going to return from my dish ID here.

52
00:03:37,920 --> 00:03:41,500
That's it, the map array operator.

53
00:03:41,500 --> 00:03:44,800
If you look up JavaScript array operators,

54
00:03:44,800 --> 00:03:47,760
you will see what the map array operator does.

55
00:03:47,760 --> 00:03:50,540
Indeed, the map array operator is also

56
00:03:50,540 --> 00:03:53,240
interesting from the perspective of the observables,

57
00:03:53,240 --> 00:03:55,910
because an observable as you saw,

58
00:03:55,910 --> 00:03:58,950
can also be viewed as an array,

59
00:03:58,950 --> 00:04:00,805
a stream of values,

60
00:04:00,805 --> 00:04:02,330
which can be viewed as an array.

61
00:04:02,330 --> 00:04:05,560
So, the map operator can also be used in observables.

62
00:04:05,560 --> 00:04:11,935
But at this moment, I am using it simply as a JavaScript array operator.

63
00:04:11,935 --> 00:04:13,660
Let's save the changes.

64
00:04:13,660 --> 00:04:20,815
Now, we will go to the Dish detail component and then update the Dish detail component.

65
00:04:20,815 --> 00:04:23,129
Now, within the Dish detail component,

66
00:04:23,129 --> 00:04:24,790
along with the Dish,

67
00:04:24,790 --> 00:04:29,940
I'm going to declare a variable called dishIds,

68
00:04:29,940 --> 00:04:32,755
which is an array of string.

69
00:04:32,755 --> 00:04:36,470
This dishIds will store all the IDs of

70
00:04:36,470 --> 00:04:42,225
all the dishes that are in my collection of dishes in my menu.

71
00:04:42,225 --> 00:04:45,410
Then, I will also have

72
00:04:45,640 --> 00:04:53,490
two more variables called previous and next of the type string.

73
00:04:53,490 --> 00:04:55,215
Now, why do I need these?

74
00:04:55,215 --> 00:04:56,980
That'll become a bit more clear,

75
00:04:56,980 --> 00:04:58,790
once you implement the view,

76
00:04:58,790 --> 00:05:00,560
where I'm going to make use of this.

77
00:05:00,560 --> 00:05:04,480
Now, what I will do here is that,

78
00:05:04,480 --> 00:05:10,610
inside my ngInit earlier,

79
00:05:10,610 --> 00:05:18,800
we did let id is equal to plus this route.snapshot params ID.

80
00:05:18,800 --> 00:05:22,565
When I did this in the previous exercise,

81
00:05:22,565 --> 00:05:28,580
I didn't explain to you what the snapshot was doing and why we're doing it this way?

82
00:05:28,580 --> 00:05:31,490
Because you needed to understand observables,

83
00:05:31,490 --> 00:05:34,060
before you understand what the snapshot means.

84
00:05:34,060 --> 00:05:43,940
Now, in Angular, the activated route service provides a set of observables.

85
00:05:43,940 --> 00:05:46,775
One of the observables is called a params.

86
00:05:46,775 --> 00:05:48,860
What this params provides us,

87
00:05:48,860 --> 00:05:56,030
is a way of obtaining the parameter values within my URL.

88
00:05:56,030 --> 00:06:00,170
So, you saw that when you introduce the route parameters,

89
00:06:00,170 --> 00:06:03,605
you introduced one of the route parameters as colon ID.

90
00:06:03,605 --> 00:06:07,590
That colon ID becomes available as an observable.

91
00:06:07,590 --> 00:06:10,330
So, whenever that value changes,

92
00:06:10,330 --> 00:06:15,745
you can observe changes in that value and then take action correspondingly.

93
00:06:15,745 --> 00:06:21,010
But, earlier when we implemented the dish detail component,

94
00:06:21,010 --> 00:06:22,825
we didn't know about observables.

95
00:06:22,825 --> 00:06:26,200
So, I couldn't explain what the snapshot was doing at that point.

96
00:06:26,200 --> 00:06:30,460
Now, let me go back and explain exactly what the snapshot does.

97
00:06:30,460 --> 00:06:32,870
When we use this as snapshot here,

98
00:06:32,870 --> 00:06:34,250
what we are doing is,

99
00:06:34,250 --> 00:06:37,580
we are taking one snapshot from

100
00:06:37,580 --> 00:06:40,250
the route service and then we are obtaining

101
00:06:40,250 --> 00:06:43,605
the parameter observable at that particular point of time.

102
00:06:43,605 --> 00:06:46,310
The value of the params at that particular point of

103
00:06:46,310 --> 00:06:49,340
time and then making use of it within our application.

104
00:06:49,340 --> 00:06:51,730
Although that is not the ideal way of doing it.

105
00:06:51,730 --> 00:06:55,010
Instead, so let's make use of the observable

106
00:06:55,010 --> 00:06:59,990
directly and then respond whenever that observable changes.

107
00:06:59,990 --> 00:07:04,650
So, how do we update this code to make use of the observable directly?

108
00:07:04,650 --> 00:07:08,030
So, what we realize is that from the activated route service,

109
00:07:08,030 --> 00:07:10,390
we have the params observable available to us.

110
00:07:10,390 --> 00:07:13,070
So, we'll make use of the params observable and

111
00:07:13,070 --> 00:07:16,755
anytime there is a change in where params observable,

112
00:07:16,755 --> 00:07:22,750
we can initiate a change within our DishDetail component.

113
00:07:22,750 --> 00:07:25,820
Let me illustrate to you how we will make use of

114
00:07:25,820 --> 00:07:28,935
the params observable by updating this code.

115
00:07:28,935 --> 00:07:30,735
So, going to this code,

116
00:07:30,735 --> 00:07:32,630
what I'm going to do now,

117
00:07:32,630 --> 00:07:37,615
is that I'm going to change this into saying,

118
00:07:37,615 --> 00:07:42,950
"I have this route and from this route,

119
00:07:42,950 --> 00:07:45,640
I have the params available already."

120
00:07:45,640 --> 00:07:50,030
So, I'm going to remove the snapshot and I use the params.

121
00:07:50,030 --> 00:07:52,060
So, with this params,

122
00:07:52,060 --> 00:08:00,410
what I have now is the access to the params observable.

123
00:08:00,410 --> 00:08:03,235
Now, since we have this params observable,

124
00:08:03,235 --> 00:08:09,545
I'm going to use an operator on this params observable and then modified it.

125
00:08:09,545 --> 00:08:17,275
So, the operator that I'm going to use is called switchMap operator.

126
00:08:17,275 --> 00:08:21,050
The switchMap operator enables me to

127
00:08:21,050 --> 00:08:26,230
make use of the params observable and you see the red squiggly line that means,

128
00:08:26,230 --> 00:08:31,590
that I need to import the switchMap observable in here.

129
00:08:31,590 --> 00:08:34,320
So, I will go in to

130
00:08:34,320 --> 00:08:39,660
my inputs here and

131
00:08:39,660 --> 00:08:45,880
then I will input rxjs and operator.

132
00:08:49,640 --> 00:08:52,710
So, from the params observable,

133
00:08:52,710 --> 00:08:57,740
I get params which is of the type Params.

134
00:08:57,740 --> 00:09:05,700
So, recall that we imported the params from the router library here.

135
00:09:05,700 --> 00:09:07,520
So, we implored to params here,

136
00:09:07,520 --> 00:09:12,289
from the router library and also we imported the activation route service here,

137
00:09:12,289 --> 00:09:15,800
and then we made them available within our constructor here,

138
00:09:15,800 --> 00:09:18,225
through the activator route.

139
00:09:18,225 --> 00:09:25,055
So, that's why we are able to do this route params to get hold of the params observable.

140
00:09:25,055 --> 00:09:27,740
I'm going use the switchMap operator on the params

141
00:09:27,740 --> 00:09:34,049
observable and then when I get the params observable,

142
00:09:34,049 --> 00:09:44,880
what I'm going to do is to take that and then say, this dishService.

143
00:09:45,030 --> 00:09:54,370
GetDish, and then this ID now should be obtained by using the params.

144
00:09:54,370 --> 00:09:58,600
You see the parameter that we have there.

145
00:09:58,600 --> 00:10:04,765
From the params, I'll say within brackets ID.

146
00:10:04,765 --> 00:10:11,490
So, what happens is that whenever the params observable changes value,

147
00:10:11,490 --> 00:10:17,680
which means that the route parameter changes value, then immediately,

148
00:10:17,680 --> 00:10:20,900
the switch map operator will take the params value,

149
00:10:20,900 --> 00:10:25,320
and then do a getDish from my dishService.

150
00:10:25,320 --> 00:10:27,060
So, this would be automatically initiated,

151
00:10:27,060 --> 00:10:31,280
and this will be available as the other

152
00:10:31,280 --> 00:10:36,900
observable that is emitted by doing this switch map operator on this observable.

153
00:10:36,900 --> 00:10:41,580
So, we are creating a new observable which is the getDish,

154
00:10:41,580 --> 00:10:45,820
which is going to return the dish object here.

155
00:10:45,820 --> 00:10:49,285
Now, once we get the getDish there,

156
00:10:49,285 --> 00:10:53,350
then that can now be available as an observable.

157
00:10:53,350 --> 00:10:57,700
I just subscribe to that observable using the subscribe here.

158
00:10:57,700 --> 00:10:59,815
Then, there I obtain the dish.

159
00:10:59,815 --> 00:11:03,930
This dish is obtained by doing this getDish here.

160
00:11:03,930 --> 00:11:08,790
That dish, then I can make use to map it into

161
00:11:08,790 --> 00:11:14,025
my dish variable that I've declared earlier.

162
00:11:14,025 --> 00:11:17,790
So, this way, my dish now gets updated.

163
00:11:17,790 --> 00:11:20,775
So, any time the params observable changes,

164
00:11:20,775 --> 00:11:24,210
my dish will get updated to the new dish.

165
00:11:24,210 --> 00:11:27,590
So, notice how I'm taking one observable, the params observable,

166
00:11:27,590 --> 00:11:33,050
and then I'm mapping the params observable into another observable which is basically

167
00:11:33,050 --> 00:11:40,675
going in fetching the dish value from my dishService,

168
00:11:40,675 --> 00:11:42,955
and then making that available as an observable.

169
00:11:42,955 --> 00:11:48,010
Then, I'm subscribing to that observable here, and then thereby,

170
00:11:48,010 --> 00:11:49,780
I'm getting the dish value here,

171
00:11:49,780 --> 00:11:52,720
and then I'm mapping the dish value or rather

172
00:11:52,720 --> 00:11:56,795
making the dish variable equal to the dish value here.

173
00:11:56,795 --> 00:12:00,415
Notice how by using the observables,

174
00:12:00,415 --> 00:12:04,865
you are now able to take one observable then map it into another observable.

175
00:12:04,865 --> 00:12:06,730
Why is this interesting?

176
00:12:06,730 --> 00:12:12,680
If now, I have a way of modifying that route parameter,

177
00:12:12,680 --> 00:12:19,005
then I will be able to switch between different dishes and see the different dishes.

178
00:12:19,005 --> 00:12:22,100
Unfortunately, I don't have that in place.

179
00:12:22,100 --> 00:12:25,735
So, I need to modify the dish components to enable me to do that.

180
00:12:25,735 --> 00:12:31,545
Now, this is where I will include a couple of buttons into my view which when I click,

181
00:12:31,545 --> 00:12:36,390
I will be able to navigate through my list of dishes.

182
00:12:36,390 --> 00:12:38,960
Now, to be able to navigate through my list of dishes,

183
00:12:38,960 --> 00:12:42,005
I need to know the set of all my dishes,

184
00:12:42,005 --> 00:12:45,525
or at least I need to know the IDs of all my dishes.

185
00:12:45,525 --> 00:12:51,410
That is the reason why I use this dishIds here, okay?

186
00:12:51,410 --> 00:12:58,800
So, now you see why I included the dishIds method into my dishService.

187
00:12:58,800 --> 00:13:01,455
So, then I start out.

188
00:13:01,455 --> 00:13:05,830
I am going to first obtain

189
00:13:05,830 --> 00:13:10,510
the dishIds by

190
00:13:10,510 --> 00:13:16,970
calling the dishService,

191
00:13:17,070 --> 00:13:22,570
getDishIds method at that point.

192
00:13:22,570 --> 00:13:25,735
I am still working with the old way of doing things.

193
00:13:25,735 --> 00:13:34,795
I have to realize that this getDishIds is sending out in observable.

194
00:13:34,795 --> 00:13:39,365
So, I need to subscribe to that observable.

195
00:13:39,365 --> 00:13:43,910
You see how you need to change your way of thinking when

196
00:13:43,910 --> 00:13:48,340
you're operating with the variables here.

197
00:13:48,340 --> 00:13:52,840
So, we would say dishIds subscribe,

198
00:13:52,840 --> 00:13:54,935
and inside the subscribe,

199
00:13:54,935 --> 00:14:00,990
we will obtain the parameter which is a string array,

200
00:14:00,990 --> 00:14:04,170
and then I would say right there,

201
00:14:04,170 --> 00:14:09,970
dishIds will be equal to dishIds.

202
00:14:09,970 --> 00:14:14,085
See, how easy it is to

203
00:14:14,085 --> 00:14:18,510
change your way of thinking when you want to deal with an observable.

204
00:14:18,510 --> 00:14:20,895
So, the getDishIds is sending an observable,

205
00:14:20,895 --> 00:14:26,790
and I'm subscribing to that observable and then I have the dishIds here available.

206
00:14:26,790 --> 00:14:29,130
Then, also by subscribing to the parameter.

207
00:14:29,130 --> 00:14:31,500
If I can change my parameter,

208
00:14:31,500 --> 00:14:35,340
value route parameter value within my code,

209
00:14:35,340 --> 00:14:38,300
then I will be able to navigate among the dishes.

210
00:14:38,300 --> 00:14:41,240
So, let's implement that part.

211
00:14:41,240 --> 00:14:43,810
This is getting interesting.

212
00:14:43,810 --> 00:14:47,515
So, to enable me to do that,

213
00:14:47,515 --> 00:14:53,190
so I will introduce another method here called setPrevNext,

214
00:14:55,770 --> 00:15:03,480
and to this, I will send a parameter dishId.

215
00:15:03,480 --> 00:15:06,295
Now, given my current dishId,

216
00:15:06,295 --> 00:15:11,355
I wanted to be able to find the previous and the next dishId so that I can implement

217
00:15:11,355 --> 00:15:17,545
my navigation between the dishes within my dishdetail component.

218
00:15:17,545 --> 00:15:22,635
So, that is the reason why I declared the prev and the next.

219
00:15:22,635 --> 00:15:25,555
Now, I need to be able to initialize these two values.

220
00:15:25,555 --> 00:15:28,650
All that I know now is my current dishId.

221
00:15:28,650 --> 00:15:30,610
So, using the current dishId,

222
00:15:30,610 --> 00:15:34,265
I want to be able to find the previous and the next dishId.

223
00:15:34,265 --> 00:15:36,080
So, in this method,

224
00:15:36,080 --> 00:15:40,255
I'm going to do the previous and the next dishId.

225
00:15:40,255 --> 00:15:42,160
So, here I will say,

226
00:15:42,160 --> 00:15:50,200
let index equal to this dishIds.

227
00:15:50,200 --> 00:15:52,900
Now, I know only the ID of my dish,

228
00:15:52,900 --> 00:15:55,360
but the ID of my dish doesn't give me everything.

229
00:15:55,360 --> 00:16:00,980
I need to be able to find the dish in this array of IDs,

230
00:16:00,980 --> 00:16:06,510
so that's why I'm saying this dishIds, and indexOf.

231
00:16:06,510 --> 00:16:13,640
You should know the indexOf operator on an JavaScript array.

232
00:16:13,640 --> 00:16:20,935
The indexOf operator takes a value and then finds the index of that value in the array.

233
00:16:20,935 --> 00:16:27,605
So, indexOf and the parameter here,

234
00:16:27,605 --> 00:16:29,945
I will give is the dishId,

235
00:16:29,945 --> 00:16:34,765
the dishId which I will obtain in a short while.

236
00:16:34,765 --> 00:16:38,765
Now, once I obtain the index of this current value,

237
00:16:38,765 --> 00:16:42,385
I can then map

238
00:16:42,385 --> 00:16:49,420
the previous two dishIds.

239
00:16:49,420 --> 00:16:59,080
So, this is where I

240
00:16:59,080 --> 00:17:08,980
will do some little bit of tricky code here that will allow me to wrap around when I am.

241
00:17:08,980 --> 00:17:15,030
So, notice that this dishIds array contains a certain number of values there.

242
00:17:15,030 --> 00:17:20,270
If my current value of my dishId is the first item,

243
00:17:20,270 --> 00:17:24,565
then the previous value will be the zeroth indexed item in my array.

244
00:17:24,565 --> 00:17:26,590
But if my current value is the zeroth item,

245
00:17:26,590 --> 00:17:28,235
the very first item in my array,

246
00:17:28,235 --> 00:17:32,530
then I want to wrap around to get the last item in my array.

247
00:17:32,530 --> 00:17:36,770
So, this is where I make use of the modulo operator with

248
00:17:36,770 --> 00:17:42,235
some mathematical way of wrapping things around.

249
00:17:42,235 --> 00:17:44,275
So, I would say this dishId

250
00:17:44,275 --> 00:18:14,500
plus index minus one, and modulo this dishIds' length.

251
00:18:14,500 --> 00:18:15,925
So, what I am doing is,

252
00:18:15,925 --> 00:18:19,590
the previous value will be the current index,

253
00:18:19,590 --> 00:18:21,735
index of the current value,

254
00:18:21,735 --> 00:18:25,935
plus the length of the dishes minus one.

255
00:18:25,935 --> 00:18:27,815
Now, if index is one,

256
00:18:27,815 --> 00:18:29,585
index minus one will give me zero.

257
00:18:29,585 --> 00:18:30,680
If index is zero,

258
00:18:30,680 --> 00:18:32,670
index minus one will give me minus one,

259
00:18:32,670 --> 00:18:34,210
but that's not what I want.

260
00:18:34,210 --> 00:18:38,190
I want to wrap around and get the dishId length minus one.

261
00:18:38,190 --> 00:18:41,870
So, that's why I am including this in there,

262
00:18:41,870 --> 00:18:44,995
and then doing a modulo with the dishIds.

263
00:18:44,995 --> 00:18:47,660
So, when index is zero,

264
00:18:47,660 --> 00:18:51,915
I will wrap around to get the last item in my array.

265
00:18:51,915 --> 00:18:56,965
So, that's how I initialize the previous value.

266
00:18:56,965 --> 00:18:59,120
Then, the next value,

267
00:18:59,120 --> 00:19:02,700
I will use the same approach,

268
00:19:02,770 --> 00:19:08,205
but wrap around by saying index plus one.

269
00:19:08,205 --> 00:19:11,780
So, if I am currently at the last item in the array,

270
00:19:11,780 --> 00:19:14,200
then I want to wrap around to zero.

271
00:19:14,200 --> 00:19:16,715
So, that's the other part of what I'm doing.

272
00:19:16,715 --> 00:19:19,200
So, there, I am setting the previous and the next.

273
00:19:19,200 --> 00:19:21,795
So, when should I set the previous and the next?

274
00:19:21,795 --> 00:19:23,965
Anytime my dish changes,

275
00:19:23,965 --> 00:19:27,630
I need to be able to initiate a call to this.

276
00:19:27,630 --> 00:19:30,590
Now, where am I changing my dish value?

277
00:19:30,590 --> 00:19:34,365
Looking back at the subscribe here,

278
00:19:34,365 --> 00:19:35,905
notice that right there,

279
00:19:35,905 --> 00:19:40,180
you are changing your dish every single time that our parameter changes.

280
00:19:40,180 --> 00:19:42,035
So, at that point,

281
00:19:42,035 --> 00:19:45,495
I want to reset my previous and next value.

282
00:19:45,495 --> 00:19:51,940
So, I'm going to change this into a block of code here.

283
00:19:51,940 --> 00:19:57,250
Then, I would say this setPrevNext,

284
00:19:57,250 --> 00:20:02,170
and then the parameter would be dishId.

285
00:20:04,370 --> 00:20:07,970
That is it. So, with this change,

286
00:20:07,970 --> 00:20:11,155
what happens is every time my dish gets updated,

287
00:20:11,155 --> 00:20:17,085
I will update the previous and the next also correspondingly from here.

288
00:20:17,085 --> 00:20:19,605
So, with this little change,

289
00:20:19,605 --> 00:20:23,150
my dishId will be the current dish.

290
00:20:23,150 --> 00:20:25,530
The previous will be pointing to the previous dish,

291
00:20:25,530 --> 00:20:28,690
and the next will be pointed to the next dishId.

292
00:20:28,690 --> 00:20:31,565
So, I have all the three that I need.

293
00:20:31,565 --> 00:20:37,460
Now, I can make use of these three values in order to implement the way to navigate

294
00:20:37,460 --> 00:20:43,325
among the dishes in my template by including a couple of buttons into my template.

295
00:20:43,325 --> 00:20:48,775
So, let's go to the dishdetail components template,

296
00:20:48,775 --> 00:20:53,569
and then include a couple of buttons that enables me to navigate among the dishes.

297
00:20:53,569 --> 00:20:58,535
Going to the Dish Detail Component while I am here,

298
00:20:58,535 --> 00:21:06,150
let me take this ngIf from this card and then move it into the div up there.

299
00:21:06,150 --> 00:21:08,445
I want to hide the entire div,

300
00:21:08,445 --> 00:21:10,850
when my dish is currently not defect,

301
00:21:10,850 --> 00:21:13,515
similarly for the comments also.

302
00:21:13,515 --> 00:21:16,440
I find this to be a bit jarring

303
00:21:16,440 --> 00:21:19,700
when my dish information is being fetched from the server.

304
00:21:19,700 --> 00:21:24,945
So, I'll make this change for both the two divs that

305
00:21:24,945 --> 00:21:32,810
one showing the comments and the other one showing the details of the dish in the card.

306
00:21:32,810 --> 00:21:35,170
With these two updates,

307
00:21:35,170 --> 00:21:37,210
inside my card actions,

308
00:21:37,210 --> 00:21:38,605
I'm going to include

309
00:21:38,605 --> 00:21:49,165
one more button of button type obviously and this button,

310
00:21:49,165 --> 00:21:55,165
I will include the routerLink.

311
00:21:55,165 --> 00:21:57,320
The moment you see router link,

312
00:21:57,320 --> 00:21:58,775
you immediately say, "Oh,

313
00:21:58,775 --> 00:22:00,620
I know what you're trying to do.

314
00:22:00,620 --> 00:22:04,890
You're trying to convert this button to be able to navigate among

315
00:22:04,890 --> 00:22:11,720
the different components within my service."

316
00:22:11,720 --> 00:22:14,000
So, for the routerLink,

317
00:22:14,000 --> 00:22:22,870
I'm going to provide an array of values and the array of values for the routerLink,

318
00:22:22,870 --> 00:22:27,135
I'm going to do dishdetail.

319
00:22:27,135 --> 00:22:30,665
Also, the second part.

320
00:22:30,665 --> 00:22:33,330
See, this is the interesting part.

321
00:22:33,330 --> 00:22:37,125
The second part of this array will be prev,

322
00:22:37,125 --> 00:22:43,090
which is the variable that I declared in my component.

323
00:22:43,090 --> 00:22:52,905
So, with this, this button will become a link to the previous dish in my list of dishes.

324
00:22:52,905 --> 00:22:55,615
Spiffy, right?

325
00:22:55,615 --> 00:23:01,010
So, with that, what else?

326
00:23:02,010 --> 00:23:07,550
Let me close off the button here and then inside the button,

327
00:23:07,550 --> 00:23:16,890
I'm going to use a Font Awesome icon

328
00:23:22,360 --> 00:23:26,550
fa chevron-left.

329
00:23:32,670 --> 00:23:37,935
So, that's it. This button will be a button with an icon there.

330
00:23:37,935 --> 00:23:40,605
So, now we have one button here,

331
00:23:40,605 --> 00:23:43,465
I'm also going to include another button here.

332
00:23:43,465 --> 00:23:44,880
Before I include the button,

333
00:23:44,880 --> 00:23:50,330
I will do span class flex-spacer,

334
00:23:50,330 --> 00:23:55,210
you saw me using the flex-spacer in one of the earlier exercises.

335
00:23:55,210 --> 00:23:56,855
So, you see what I'm doing,

336
00:23:56,855 --> 00:24:00,695
I'm stretching to include the second button.

337
00:24:00,695 --> 00:24:02,270
So, for the second button,

338
00:24:02,270 --> 00:24:05,040
I'm just going to copy this

339
00:24:06,780 --> 00:24:13,190
and then paste it there and then update this one to say prev.

340
00:24:13,190 --> 00:24:16,730
Instead of previous, I will go next and then

341
00:24:16,730 --> 00:24:23,335
fa-chevron-left to fa-chevron-right, and that's it.

342
00:24:23,335 --> 00:24:28,049
Let's save the changes to our Dish Detail Components,

343
00:24:28,049 --> 00:24:30,760
and also the remaining files.

344
00:24:30,760 --> 00:24:35,340
After this update, let's go and check out what our application does.

345
00:24:35,340 --> 00:24:38,065
Going to my application in the browser,

346
00:24:38,065 --> 00:24:40,500
let's go to the Menu component.

347
00:24:40,500 --> 00:24:46,240
We see the Menu and let's select one item from the Menu here.

348
00:24:46,240 --> 00:24:53,270
So, notice that now this item from the menu dish is displayed here.

349
00:24:53,270 --> 00:24:55,225
Notice at the bottom,

350
00:24:55,225 --> 00:24:58,835
we have two buttons here, left and right.

351
00:24:58,835 --> 00:25:01,440
When we click on the left button,

352
00:25:01,440 --> 00:25:08,875
note how we are able to move to the previous dish in the list of dishes.

353
00:25:08,875 --> 00:25:15,515
I can keep doing left again and keep navigating to the left and the right.

354
00:25:15,515 --> 00:25:17,980
Notice that when I do this,

355
00:25:17,980 --> 00:25:22,655
my actual view is not getting reloaded,

356
00:25:22,655 --> 00:25:25,190
instead I'm only going in fetching

357
00:25:25,190 --> 00:25:34,955
the dish-related data from the service and then updating my view here.

358
00:25:34,955 --> 00:25:38,350
The reason we are able to do this is because we

359
00:25:38,350 --> 00:25:43,445
have the observable, the params observable.

360
00:25:43,445 --> 00:25:45,890
So, anytime I click on these two,

361
00:25:45,890 --> 00:25:48,860
left and right, the params observable,

362
00:25:48,860 --> 00:25:56,620
notice how at this moment the address shows dishdetail zero.

363
00:25:56,620 --> 00:25:58,315
If I click on the right,

364
00:25:58,315 --> 00:26:02,925
then that will be updated from dishdetail zero to dishdetail one.

365
00:26:02,925 --> 00:26:07,560
That parameter change, and that will cause my observable to

366
00:26:07,560 --> 00:26:12,245
go and fetch the new dish from the dish service.

367
00:26:12,245 --> 00:26:14,980
Then, the new dish is fetched,

368
00:26:14,980 --> 00:26:20,285
the dish variable in my component gets updated,

369
00:26:20,285 --> 00:26:21,885
and when that gets updated,

370
00:26:21,885 --> 00:26:23,640
my view also gets updated.

371
00:26:23,640 --> 00:26:28,185
So, notice that I'm using the same view,

372
00:26:28,185 --> 00:26:36,440
I'm able to navigate among the various dishes that are part of my list of dishes.

373
00:26:36,440 --> 00:26:42,470
This is the interesting part that you can get by using the params

374
00:26:42,470 --> 00:26:49,250
observable from the activator.service within your Angular application.

375
00:26:49,250 --> 00:26:56,355
Interesting way of making use of observables bills our Angular application.

376
00:26:56,355 --> 00:26:59,640
Of course, the way I have implemented it,

377
00:26:59,640 --> 00:27:03,210
I did it a little bit of a contrived way of doing things.

378
00:27:03,210 --> 00:27:07,965
I had to get hold of the list of dish IDs.

379
00:27:07,965 --> 00:27:12,760
I had to modify the previous and the next and so on.

380
00:27:12,760 --> 00:27:16,360
If you had a way of obtaining the previous

381
00:27:16,360 --> 00:27:20,000
and the next value automatically from your service,

382
00:27:20,000 --> 00:27:22,015
whenever you fetch a dish,

383
00:27:22,015 --> 00:27:26,895
then the implementation of the score will become a bit more easier.

384
00:27:26,895 --> 00:27:28,705
Right now we don't have that.

385
00:27:28,705 --> 00:27:33,430
So, I worked around the problem because I just wanted to illustrate the way

386
00:27:33,430 --> 00:27:38,855
of using an observable like this within your Angular application.

387
00:27:38,855 --> 00:27:43,270
If we can implement the service that will return the

388
00:27:43,270 --> 00:27:47,320
previous and the next value whenever we fetch a dish,

389
00:27:47,320 --> 00:27:53,640
then all this headache will be a lot more simply solved.

390
00:27:53,640 --> 00:27:58,810
Let's postpone that idea to a later stage.

391
00:27:58,810 --> 00:28:01,930
But at the moment, you see how we are making

392
00:28:01,930 --> 00:28:05,250
use of the params observable in order to implement

393
00:28:05,250 --> 00:28:12,605
an interesting way of supporting a new feature within our Angular application.

394
00:28:12,605 --> 00:28:16,325
This completes this exercise.

395
00:28:16,325 --> 00:28:24,000
This is a good time for you to do a git commit with the message RXJS Part two.