1
00:00:00,000 --> 00:00:04,586
[MUSIC]

2
00:00:04,586 --> 00:00:08,713
Let me now give you a quick
overview of Angular and

3
00:00:08,713 --> 00:00:12,340
its relationship with reactive program,

4
00:00:12,340 --> 00:00:16,780
how does Angular make use
of reactive programming.

5
00:00:16,780 --> 00:00:21,988
In particular, the RxJS library and
how it is leveraged by

6
00:00:21,988 --> 00:00:28,174
Angular to provide a reactive way
of writing Angular applications.

7
00:00:28,174 --> 00:00:33,199
Now what we present in this lecture
is a very quick overview of

8
00:00:33,199 --> 00:00:38,426
the general concept of reactive
programming, observables,

9
00:00:38,426 --> 00:00:43,930
the observed pattern and
how it is applied in Angular.

10
00:00:43,930 --> 00:00:47,280
Reactive programming by
itself is a very vast

11
00:00:48,460 --> 00:00:52,100
topic that cannot be
covered in ten minutes.

12
00:00:53,240 --> 00:00:54,410
Reactive programming,

13
00:00:54,410 --> 00:00:59,800
if I need to cover it in full detail will
become an entire course in its own right.

14
00:00:59,800 --> 00:01:01,421
And unfortunately,

15
00:01:01,421 --> 00:01:07,372
we don't have the time to embed an entire
course into this particular course.

16
00:01:07,372 --> 00:01:12,718
So given the fact that we are interested
mainly in how Angular leverages

17
00:01:12,718 --> 00:01:18,066
reactive programming to enable us
to double up Angular applications,

18
00:01:18,066 --> 00:01:21,590
so we will concentrate on that aspect.

19
00:01:21,590 --> 00:01:22,455
But along the way,

20
00:01:22,455 --> 00:01:28,340
I'll give you a quick introduction to
the various concepts in this general area.

21
00:01:28,340 --> 00:01:30,720
If you get interested in
reactive programming,

22
00:01:30,720 --> 00:01:36,100
I would strongly advise you to pursue some
of the links that I have provided and

23
00:01:36,100 --> 00:01:40,240
additional resources for
this particular lesson.

24
00:01:40,240 --> 00:01:44,090
You have access to a lot
of material out there, but

25
00:01:44,090 --> 00:01:48,220
we'll give you a strong grounding
in reactive programming.

26
00:01:48,220 --> 00:01:51,713
But in this course,
from this point onwards,

27
00:01:51,713 --> 00:01:57,448
we will look at how Angular leverages
the reactive programming paradigm for

28
00:01:57,448 --> 00:02:00,150
designing Angular applications.

29
00:02:00,150 --> 00:02:04,818
We are not just going to
restrict only to this lesson, but

30
00:02:04,818 --> 00:02:10,266
all the subsequent lessons will
also see Used of the observable and

31
00:02:10,266 --> 00:02:16,220
the observe pattern and how we write
reactive applications in angular.

32
00:02:18,080 --> 00:02:22,800
The whole discussion about reactive
programming revolves around

33
00:02:22,800 --> 00:02:27,770
this particular software engineering
pattern called as observable pattern.

34
00:02:27,770 --> 00:02:31,970
You recall the gang of four that I
mentioned to you in one of the earlier

35
00:02:31,970 --> 00:02:35,690
lectures where we discussed about
model view controller framework and

36
00:02:35,690 --> 00:02:38,140
the model view model framework.

37
00:02:38,140 --> 00:02:43,246
The same gang of four book
contains some of the pattern that

38
00:02:43,246 --> 00:02:49,616
has been quite successfully used in
the reactive programming pattern.

39
00:02:49,616 --> 00:02:53,570
The observer pattern
revolves around observables.

40
00:02:53,570 --> 00:02:58,948
So you have observables, whose
behavior can be observed by observers.

41
00:02:58,948 --> 00:03:02,200
So that's why this is called
the observer pattern.

42
00:03:02,200 --> 00:03:07,180
You declare certain objects
as observable or subjects and

43
00:03:07,180 --> 00:03:12,060
these observables will be
observed by observers.

44
00:03:12,060 --> 00:03:15,190
Now, the observers
themselves will register to

45
00:03:16,280 --> 00:03:19,400
watch the changes in the observable and

46
00:03:19,400 --> 00:03:24,010
the observable will notify
the observers whenever changes occur.

47
00:03:24,010 --> 00:03:29,781
So in this observer pattern,
the way these observers will subscribe

48
00:03:29,781 --> 00:03:35,165
to the observable or
register themselves with the observable.

49
00:03:35,165 --> 00:03:40,013
So, that's how the observable knows
which observers are interested in

50
00:03:40,013 --> 00:03:42,430
any changes in its state.

51
00:03:42,430 --> 00:03:46,250
So thereby,
whenever an observable observe say,

52
00:03:46,250 --> 00:03:51,830
change in its state, it will
immediately notify all the observers

53
00:03:51,830 --> 00:03:56,660
about the change of state and
the observers subsequently can take

54
00:03:56,660 --> 00:04:02,170
action based upon this notification
of the change in the observable.

55
00:04:02,170 --> 00:04:06,185
The observer pattern has been very
effectively used in many different

56
00:04:06,185 --> 00:04:07,212
circumstances.

57
00:04:07,212 --> 00:04:12,600
And indeed, the reactive programming
paradigm is based around it.

58
00:04:12,600 --> 00:04:15,990
So, the question that comes
to your mind immediately is

59
00:04:15,990 --> 00:04:18,280
why do we talk about the observables?

60
00:04:18,280 --> 00:04:21,730
What is the special
interest about observables?

61
00:04:21,730 --> 00:04:26,161
Observer pattern is one way of
writing Software applications.

62
00:04:26,161 --> 00:04:29,760
So, this is based around Streams.

63
00:04:29,760 --> 00:04:33,290
So, you have data that
flows your application.

64
00:04:33,290 --> 00:04:37,826
This data can be viewed as a stream
of values that flows through your

65
00:04:37,826 --> 00:04:38,879
application.

66
00:04:38,879 --> 00:04:44,158
So, the stream is the primary
channel around which observables and

67
00:04:44,158 --> 00:04:47,380
observable pattern is designed.

68
00:04:47,380 --> 00:04:51,007
So, which streams you can
subscribe to these streams.

69
00:04:51,007 --> 00:04:55,762
And whenever a value comes around on
the stream, you pick up that value and

70
00:04:55,762 --> 00:04:58,400
then you can react to that value.

71
00:04:58,400 --> 00:05:02,430
So to be able to react to that value,
you need to subscribe to that stream or

72
00:05:02,430 --> 00:05:04,710
you need to subscribe to the observable.

73
00:05:04,710 --> 00:05:08,860
The observable will frequently
keep emitting values.

74
00:05:08,860 --> 00:05:13,059
And when you see those values,
the observer can react to those.

75
00:05:13,059 --> 00:05:16,413
Now this also means that when
you are no longer interested,

76
00:05:16,413 --> 00:05:19,660
you can unsubscribe yourself
from an observable.

77
00:05:19,660 --> 00:05:23,653
You can say, I'm not interested in
watching you anymore and then disappear.

78
00:05:23,653 --> 00:05:28,794
So the observable pattern allows you
to periodically observe changes,

79
00:05:28,794 --> 00:05:34,170
if you want and then stop observing
when you are no longer interested.

80
00:05:34,170 --> 00:05:38,855
So that kind of a paradigm enables
you to design your software

81
00:05:38,855 --> 00:05:43,135
applications in a very interesting way,
in a very intuitive way.

82
00:05:43,135 --> 00:05:45,435
But to be able to use this approach,

83
00:05:45,435 --> 00:05:48,513
you need to get your head
around this approach.

84
00:05:48,513 --> 00:05:55,455
Just like we saw with the callback pattern
or we saw with the use of promises.

85
00:05:55,455 --> 00:06:01,740
Observables is yet
another way of designing applications.

86
00:06:01,740 --> 00:06:06,605
So, an observable by itself will be very
lazy and it'll just hang around there.

87
00:06:06,605 --> 00:06:10,360
So, you can create an observable and
then just leave it there.

88
00:06:10,360 --> 00:06:12,496
The observable becomes active or

89
00:06:12,496 --> 00:06:16,777
it becomes hot when somebody starts
to subscribe to the observer.

90
00:06:16,777 --> 00:06:21,380
So at that point, observer kicks into
action and starts editing values.

91
00:06:21,380 --> 00:06:25,515
So if at least one observer is
entrusted in the observable,

92
00:06:25,515 --> 00:06:29,000
then the observable will
start emitting values.

93
00:06:29,000 --> 00:06:36,010
If nobody is entrusted, observable will
go back into its shell and remain there.

94
00:06:36,010 --> 00:06:38,058
So, you can think of it that way.

95
00:06:38,058 --> 00:06:42,231
So if that mental picture
helps you to understand

96
00:06:42,231 --> 00:06:46,760
how the observer patent works,
then so be it.

97
00:06:46,760 --> 00:06:51,939
So, that will help you to look at
the way we design our applications

98
00:06:51,939 --> 00:06:56,657
in the exercises that follow and
then the subsequent lessons

99
00:06:56,657 --> 00:07:01,116
where we examine HTTP supported
Angular in more detail.

100
00:07:04,490 --> 00:07:11,222
One other aspect of observables is the
fact that canceling a previous request and

101
00:07:11,222 --> 00:07:16,172
then retrying is very
straightforward with observables.

102
00:07:16,172 --> 00:07:20,660
The promise that you saw earlier,
once you start waiting for a promise,

103
00:07:20,660 --> 00:07:23,690
you cannot cancel, you're waiting.

104
00:07:23,690 --> 00:07:26,878
The promise will eventually resolve or
fail and

105
00:07:26,878 --> 00:07:31,907
then you have to react no matter what
even if you're no longer interested.

106
00:07:31,907 --> 00:07:36,075
But with an observable,
if you can sell your subscription,

107
00:07:36,075 --> 00:07:41,540
then that what happens with the observable
is not any concern to you at all.

108
00:07:41,540 --> 00:07:45,019
And so you don't need to do anything,
if you cancel your subscription.

109
00:07:45,019 --> 00:07:50,732
So, canceling and
retrying in case the earlier trial doesn't

110
00:07:50,732 --> 00:07:55,599
succeed is very straightforward
with observables.

111
00:07:55,599 --> 00:08:01,710
We will see some of these behaviors in
more detail in the exercises that follow.

112
00:08:03,050 --> 00:08:06,771
This brings us to that concept
of reactive programming.

113
00:08:06,771 --> 00:08:11,071
Reactive programming is based
around observer pattern and

114
00:08:11,071 --> 00:08:13,550
also an iterated pattern.

115
00:08:13,550 --> 00:08:14,243
But anyway,

116
00:08:14,243 --> 00:08:18,610
the observer pattern is the dominant
feature of a reactive programming.

117
00:08:18,610 --> 00:08:22,670
So in reactive programming,
we are interested in data flows.

118
00:08:22,670 --> 00:08:25,780
How data flows through your application.

119
00:08:25,780 --> 00:08:29,450
Any data flow can be treated as a stream.

120
00:08:29,450 --> 00:08:34,510
So this data flow can propagate
changes throughout your application.

121
00:08:34,510 --> 00:08:37,940
And while the changes are being
propagated through the application,

122
00:08:39,140 --> 00:08:43,440
at intermediary stages you can
even take one particular stream,

123
00:08:43,440 --> 00:08:46,860
modify it and create another
stream going out from there.

124
00:08:46,860 --> 00:08:51,980
So that is what an observable
pattern enables us to drew.

125
00:08:51,980 --> 00:08:58,000
So that entire programming paradigm is
built around streams or data flows.

126
00:08:58,000 --> 00:09:04,540
So this is another way of
looking at solving your problem.

127
00:09:04,540 --> 00:09:10,180
And that's why I am emphasize the fact
that you need to get your head around to

128
00:09:10,180 --> 00:09:17,120
understand how the reactive pattern or how
reactive programming is done in practice.

129
00:09:17,120 --> 00:09:20,810
Now, you often hear people talking
about something called functional

130
00:09:20,810 --> 00:09:22,290
reactive programming.

131
00:09:22,290 --> 00:09:25,640
If you are familiar with
the functional programming paradigm.

132
00:09:25,640 --> 00:09:28,430
But plus reactive programming

133
00:09:28,430 --> 00:09:32,400
is what people often reference to
as functional reactive programming.

134
00:09:32,400 --> 00:09:35,670
So the inter-marriage of
these two approaches.

135
00:09:35,670 --> 00:09:40,340
Now, you will see the use of
some of these with Angular

136
00:09:40,340 --> 00:09:43,720
as you go through this particular course.

137
00:09:43,720 --> 00:09:46,010
Finally, what about RxJS?

138
00:09:46,010 --> 00:09:49,890
What role does it play
in this whole ecosystem?

139
00:09:49,890 --> 00:09:55,280
RxJS is a JavaScript implementation
of the observable pattern and

140
00:09:55,280 --> 00:09:58,750
also support for reactive programming.

141
00:09:58,750 --> 00:10:03,820
So if you were to do reactive
programming in JavaScript,

142
00:10:03,820 --> 00:10:07,820
then you leverage the RxJS library for
doing so.

143
00:10:07,820 --> 00:10:10,790
RxJS just one such implementation.

144
00:10:10,790 --> 00:10:15,990
There are a few others but the reason why
we are interested in RxJS in particular

145
00:10:15,990 --> 00:10:20,860
in this course is because
Angular leverages RxJS for

146
00:10:20,860 --> 00:10:23,880
its support for reactive programming.

147
00:10:23,880 --> 00:10:26,190
So the RxJS is a library.

148
00:10:26,190 --> 00:10:28,480
It is a separate library
that is out there.

149
00:10:28,480 --> 00:10:35,010
You can use RxJS for other purposes also,
not necessarily related to Angular.

150
00:10:35,010 --> 00:10:39,960
There have been applications that
have been developed using RxJS per se

151
00:10:39,960 --> 00:10:42,400
not related to Angular.

152
00:10:42,400 --> 00:10:46,955
But in this course, we are interested
in how RxJS comes together with

153
00:10:46,955 --> 00:10:52,480
the Angular to support reactive
programming in Angular.

154
00:10:52,480 --> 00:10:57,790
So there RxJS is a library that enables
you to do asynchronous programming.

155
00:10:57,790 --> 00:11:01,800
We have talked about asynchronous
programming that promises earlier.

156
00:11:01,800 --> 00:11:06,300
We'll see asynchronous programming
with callbacks in the node course.

157
00:11:06,300 --> 00:11:11,380
And observables is yet
another way of looking at

158
00:11:11,380 --> 00:11:16,530
asynchronous programming,
together with event driven programmer.

159
00:11:16,530 --> 00:11:20,320
So if you are familiar with the event
driven programming paradigm,

160
00:11:20,320 --> 00:11:24,230
RxJS fits right well
within that environment.

161
00:11:25,970 --> 00:11:30,290
The whole thing is built
around Observable sequences.

162
00:11:30,290 --> 00:11:37,160
And RxJS library provides you with
one core type called as Observable.

163
00:11:37,160 --> 00:11:39,810
And around this core type,
you have some satellite

164
00:11:39,810 --> 00:11:44,390
types that are built called as observers,
schedulers, and subjects.

165
00:11:44,390 --> 00:11:47,520
All these enable you to
do reactive programming.

166
00:11:48,620 --> 00:11:54,445
Furthermore, RxJS also supports
a whole bunch of operators.

167
00:11:55,745 --> 00:11:59,345
Supports operators, separators, sorry.

168
00:11:59,345 --> 00:12:02,545
That was a [LAUGH] slip of my tongue.

169
00:12:03,872 --> 00:12:06,642
RxJS supports operators,

170
00:12:06,642 --> 00:12:11,292
operators that are inspired by
the JavaScript array operators.

171
00:12:11,292 --> 00:12:15,892
If you're familiar with JavaScript
array operators like map then

172
00:12:18,202 --> 00:12:22,232
the RxJS operators will
look very familiar to you.

173
00:12:22,232 --> 00:12:25,372
You can treat an observable and

174
00:12:25,372 --> 00:12:30,340
the values that an observable image just
like an array, so that's why many of

175
00:12:30,340 --> 00:12:36,170
the array operators find their way into
RxJS and reactive programming also.

176
00:12:36,170 --> 00:12:40,250
So the users map, filter, reduce and

177
00:12:40,250 --> 00:12:46,440
other array operators will also find
a place in RxJS and reactive programming.

178
00:12:46,440 --> 00:12:51,890
And this is what allows you to handle
asynchronous events as collections.

179
00:12:51,890 --> 00:12:55,092
So, when you are wanting to wait for

180
00:12:55,092 --> 00:12:59,770
an asynchronous event, it will be
similar to subscribing to an observable.

181
00:12:59,770 --> 00:13:03,684
So when that observable emits the value,
you are ready to catch the value and

182
00:13:03,684 --> 00:13:05,550
then act accordingly.

183
00:13:05,550 --> 00:13:07,960
You do know when that emission
is going to take place.

184
00:13:07,960 --> 00:13:13,220
So that is the asynchronous part
coming into play with the use of RxJS.

185
00:13:14,550 --> 00:13:19,480
And as I mentioned already, the reason
why we're interested in RxJS is because

186
00:13:19,480 --> 00:13:22,750
Angular leverages the RxJS library for

187
00:13:23,900 --> 00:13:27,840
doing its support for
reactive programming.

188
00:13:27,840 --> 00:13:31,080
Angular itself has a number
of built in observables,

189
00:13:31,080 --> 00:13:32,369
as we will see in a short while.

190
00:13:33,430 --> 00:13:38,430
When you get into the reactive programming
world, you will often hear people talking

191
00:13:38,430 --> 00:13:42,230
about observables then you will hear
people talking about operators and

192
00:13:42,230 --> 00:13:45,830
then you will also hear people
talking about marble diagrams.

193
00:13:45,830 --> 00:13:49,290
Now, marble diagrams
are a way of representing

194
00:13:50,390 --> 00:13:53,730
the reactive programming
using observables.

195
00:13:53,730 --> 00:13:55,710
So if you happen to have an observable,

196
00:13:56,830 --> 00:14:02,070
then if you view this observable
as a function of time,

197
00:14:02,070 --> 00:14:06,710
so if this axis represents
a function of time, the observable

198
00:14:06,710 --> 00:14:12,090
will be periodically emitting values
like this, one after another.

199
00:14:12,090 --> 00:14:16,896
So if you organize these
values along a sequence,

200
00:14:16,896 --> 00:14:21,540
as a function of time, so you would
see values being emitted like this.

201
00:14:22,680 --> 00:14:26,350
There is also a possibility that
you can encounter an error.

202
00:14:27,750 --> 00:14:30,990
In which case, you need to
handle the error appropriately.

203
00:14:30,990 --> 00:14:32,510
If you handle the error appropriately,

204
00:14:32,510 --> 00:14:37,830
you may continue or
you may stop at that point.

205
00:14:37,830 --> 00:14:41,520
Similarly, when an observable
completes all its iterations,

206
00:14:41,520 --> 00:14:44,730
then It'll be marked as
the completion of the observable.

207
00:14:44,730 --> 00:14:49,570
So you need to be able to even handle
the completion event in an observable.

208
00:14:49,570 --> 00:14:54,500
Given this time annotated behavior
of the observable, you can then take

209
00:14:54,500 --> 00:15:00,240
the values that the observable image and
apply operators on those observables.

210
00:15:00,240 --> 00:15:04,680
Now these values can
be viewed as an array.

211
00:15:04,680 --> 00:15:10,120
If that helps you to better understand,
you can view it as an array of values.

212
00:15:10,120 --> 00:15:15,140
Now, these values can then be operated
upon by using various operators.

213
00:15:15,140 --> 00:15:21,630
So that is where your map, your filter,
your reduce and several operators that

214
00:15:21,630 --> 00:15:26,560
any typical reactive program
libraries like RxJS supports.

215
00:15:26,560 --> 00:15:29,010
Enable you to transform

216
00:15:29,010 --> 00:15:33,590
one set of values that you get from
an observable into another set of values.

217
00:15:33,590 --> 00:15:36,640
Thereby, you end up
creating a new observable.

218
00:15:36,640 --> 00:15:39,170
And this new observable will consist of

219
00:15:39,170 --> 00:15:42,830
transformed values from
the original observable.

220
00:15:42,830 --> 00:15:48,294
So that's the reason why I show these
transformed values as rectangles here.

221
00:15:48,294 --> 00:15:52,861
Just to give you a visual impression of
what it is that we are trying to do with

222
00:15:52,861 --> 00:15:54,170
an operator.

223
00:15:54,170 --> 00:15:58,620
So you're taking a value and then
transforming it into a different value.

224
00:15:58,620 --> 00:16:01,640
And that sequence of those
different values that

225
00:16:01,640 --> 00:16:06,400
You obtain by transforming
the values emitted by an observable.

226
00:16:06,400 --> 00:16:11,390
Will itself become another string
of values, and consequently,

227
00:16:11,390 --> 00:16:12,880
will become another observable.

228
00:16:12,880 --> 00:16:16,820
So you can derive one observable
from another observable.

229
00:16:16,820 --> 00:16:19,335
But this second observable is dependent
upon the first one so it depends.

230
00:16:19,335 --> 00:16:26,600
Its behavior is typed, the first one
through the use of this operator.

231
00:16:26,600 --> 00:16:31,730
We will see examples of these as we
go through some of the exercises

232
00:16:31,730 --> 00:16:37,210
in this lesson and subsequent lessons.

233
00:16:37,210 --> 00:16:41,450
What about Angular and RxJS,
how do they come together?

234
00:16:41,450 --> 00:16:48,540
Angular, as we mentioned earlier, supports
a number of observables on its own.

235
00:16:48,540 --> 00:16:53,375
And this support of observables
in Angular enables you to do some

236
00:16:53,375 --> 00:16:59,070
reactive programming within
your Angular application.

237
00:16:59,070 --> 00:17:02,210
So, for example, forms in Angular,

238
00:17:02,210 --> 00:17:06,340
we saw reactive forms already
in one of the earlier lessons.

239
00:17:06,340 --> 00:17:11,040
At that point, I never mentioned
the word observable explicitly there.

240
00:17:11,040 --> 00:17:15,725
But now that we know observable,
we'll go back to the reactive form, and

241
00:17:15,725 --> 00:17:18,440
then do some transformation
to the reactive form.

242
00:17:18,440 --> 00:17:21,460
Forms themselves become
observables in Angular.

243
00:17:21,460 --> 00:17:26,337
And any changes in the values
of any of the form elements,

244
00:17:26,337 --> 00:17:30,605
can be outputted, and
observed by subscribing to

245
00:17:30,605 --> 00:17:36,280
the observable that the Angular
framework provides for us.

246
00:17:36,280 --> 00:17:41,934
Similarly, HTTP, which we will encounter
in the next module of this course,

247
00:17:41,934 --> 00:17:46,500
will also be based around observables.

248
00:17:46,500 --> 00:17:52,720
So when your service goes and fetches
data from a server, the HTTP library,

249
00:17:52,720 --> 00:17:56,750
or the HTTP module in Angular,
supports observables.

250
00:17:56,750 --> 00:17:59,780
So whenever you perform any of
the methods, get, put, post, or

251
00:17:59,780 --> 00:18:04,160
delete, using HTTP,
they will yield you an observable

252
00:18:04,160 --> 00:18:07,730
which you can then subscribe
within your service.

253
00:18:07,730 --> 00:18:11,495
And then subsequently transform it, and
then give it to your components, and

254
00:18:11,495 --> 00:18:13,958
the components can subscribe
to the observables.

255
00:18:13,958 --> 00:18:18,410
The service is provided by
transforming the HTTP streams.

256
00:18:18,410 --> 00:18:21,780
And so
that is where the reactive programming and

257
00:18:21,780 --> 00:18:27,800
flow of data through your Angular
application becomes very straightforward.

258
00:18:27,800 --> 00:18:32,840
Similarly, there is an AsyncPipe, which
you will encounter later in this course.

259
00:18:32,840 --> 00:18:38,631
And also change detection built
around observables in Angular.

260
00:18:38,631 --> 00:18:44,310
You will see some examples of
this in the rest of this course.

261
00:18:44,310 --> 00:18:49,110
Now, getting back to the question
that we saw in the previous slide.

262
00:18:49,110 --> 00:18:53,615
How do you take an observable and
transform it into another observable?

263
00:18:53,615 --> 00:19:01,465
Here is an example that you will encounter
in the exercise that follows this lecture.

264
00:19:01,465 --> 00:19:07,415
So here, we have the route parameter

265
00:19:07,415 --> 00:19:12,410
within our menu component,
which uses the route parameter to

266
00:19:12,410 --> 00:19:17,710
supply the value of the selected
dish to the dish detail component.

267
00:19:17,710 --> 00:19:20,250
So the route parameter
becomes an observable.

268
00:19:20,250 --> 00:19:24,905
Angular's router module has an activity
ActivatedRoute service which

269
00:19:24,905 --> 00:19:30,435
supports a bunch of observables and one
among them being the params observable.

270
00:19:30,435 --> 00:19:33,996
The params observable is tied
to the route parameters.

271
00:19:33,996 --> 00:19:37,615
And so any changes to the parameters,

272
00:19:37,615 --> 00:19:43,620
in the URL that you encounter
will be emitted as an observable.

273
00:19:43,620 --> 00:19:47,521
Now, so when you get the observable,
so as you can see,

274
00:19:47,521 --> 00:19:53,010
you can get access to this observable by
saying this route params in your code.

275
00:19:53,010 --> 00:19:55,415
So the params itself
is an observable here.

276
00:19:55,415 --> 00:19:57,666
Now, to this params observable,

277
00:19:57,666 --> 00:20:02,970
you can apply an operator like
an operator here called switchmap.

278
00:20:02,970 --> 00:20:05,830
We'll see the use of
this in the excercise.

279
00:20:05,830 --> 00:20:09,840
The switchmap operator takes
the params observable.

280
00:20:09,840 --> 00:20:17,190
And then transforms the params observable
into another observable which is a dish.

281
00:20:17,190 --> 00:20:21,861
It takes the params value, and then
extracts the ID value from the params,

282
00:20:21,861 --> 00:20:25,493
which gives you access to
the route parameter, the id, or

283
00:20:25,493 --> 00:20:30,708
the parameter that you have specified, and
then uses that to go and fetch the dish.

284
00:20:30,708 --> 00:20:38,265
So every time the parameter changes, it
will result in a fetching of a new dish.

285
00:20:38,265 --> 00:20:42,045
And so every time the parameter changes,

286
00:20:42,045 --> 00:20:47,290
which is equivalent to emitting a new
value by their params observable.

287
00:20:47,290 --> 00:20:50,850
That gets transformed into
fetching of the new dish for

288
00:20:50,850 --> 00:20:53,190
which that is the corresponding ID.

289
00:20:53,190 --> 00:20:56,240
So the dish will then
become another observable.

290
00:20:56,240 --> 00:21:01,100
Now, when this dish observable becomes
available, you can subscribe to this

291
00:21:01,100 --> 00:21:05,850
dish observable here, and
obtain the dish value.

292
00:21:05,850 --> 00:21:10,490
And when you obtain the dish value, then
you can take the dish value, and then it

293
00:21:10,490 --> 00:21:17,742
create your dish variable within your
dish detail component to that dish value.

294
00:21:17,742 --> 00:21:22,468
So thereby, any change to the route
parameter propagates through this

295
00:21:22,468 --> 00:21:25,224
switchmap operator into an observable,

296
00:21:25,224 --> 00:21:28,296
which when observed
through the subscribed,

297
00:21:28,296 --> 00:21:32,569
will enable you to transform that and
assign that to other dish.

298
00:21:32,569 --> 00:21:37,236
And when this happens,
your view can get updated with

299
00:21:37,236 --> 00:21:41,915
the new dish that has been
obtained from the service.

300
00:21:41,915 --> 00:21:47,106
So now, you see how the data flows
through the route parameter,

301
00:21:47,106 --> 00:21:50,184
through the switchmap operator, and

302
00:21:50,184 --> 00:21:55,985
into resulting in the change of
the view of your dish detail component.

303
00:21:55,985 --> 00:22:01,000
That's the reason why
observable based programming or

304
00:22:01,000 --> 00:22:05,060
reactive programming in Angular
becomes very useful for

305
00:22:05,060 --> 00:22:09,070
implementing certain features
within your Angular application.

306
00:22:09,070 --> 00:22:11,034
This being one such example.

307
00:22:11,034 --> 00:22:15,984
We will see the use of
this particular example in

308
00:22:15,984 --> 00:22:20,332
the exercise that follows this lecture.

309
00:22:20,332 --> 00:22:22,658
I thought I'd make it easy for

310
00:22:22,658 --> 00:22:27,970
you to remember all of this by just
singing this Ode to Observables.

311
00:22:27,970 --> 00:22:34,948
[MUSIC]

312
00:22:34,948 --> 00:22:37,469
You should sing this to the tune of,

313
00:22:37,469 --> 00:22:42,310
You Can Call Me Al by Paul Simon
of the Simon and Garfunkel fame.

314
00:22:42,310 --> 00:22:46,000
If you're turning around and
saying, who's Paul Simon?

315
00:22:46,000 --> 00:22:47,385
Sorry, different generation.

316
00:22:47,385 --> 00:22:53,670
[MUSIC]