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

2
00:00:04,740 --> 00:00:09,772
Using the Angular Router, we have
already learned how we can navigate

3
00:00:09,772 --> 00:00:15,673
from one view to another view using the
router link directive to specify the link.

4
00:00:15,673 --> 00:00:21,823
And also the router module, enabling
us with the specification of the path,

5
00:00:21,823 --> 00:00:26,715
to navigate to the views of
the different components.

6
00:00:26,715 --> 00:00:31,265
Now, let's take an example
of the dishdetail component.

7
00:00:31,265 --> 00:00:36,680
So far, the dishdetail component has
been working by receiving the details

8
00:00:36,680 --> 00:00:42,270
of the specific dish that it needs
to display from the menu component.

9
00:00:42,270 --> 00:00:47,211
But this was facilitated because
the dishdetail component had a property

10
00:00:47,211 --> 00:00:49,290
that was sending in the value.

11
00:00:49,290 --> 00:00:52,201
And then we were using
the input decorator for

12
00:00:52,201 --> 00:00:57,027
the variable inside the dishdetail
component to get hold of that value that

13
00:00:57,027 --> 00:01:00,800
was being passed in from
the menu component.

14
00:01:00,800 --> 00:01:06,120
Now, when you have these components
being routed to using a router,

15
00:01:06,120 --> 00:01:10,440
this connection between
the components no longer exists.

16
00:01:10,440 --> 00:01:13,995
So we need to leverage
the Angular Router to be able to pass

17
00:01:13,995 --> 00:01:17,560
information from one component
to the other component.

18
00:01:17,560 --> 00:01:22,140
And this is usually done
in the form of parameters.

19
00:01:22,140 --> 00:01:25,940
Parameters that can be either
specified as route parameters,

20
00:01:25,940 --> 00:01:29,600
as we will learn a little bit later,
or query parameters.

21
00:01:31,480 --> 00:01:34,320
So for the Angular Router,
what we have learned so

22
00:01:34,320 --> 00:01:38,890
far is that the paths
are all specified as a URL.

23
00:01:38,890 --> 00:01:43,532
Suppose you have a need to pass
a parameter value from one component to

24
00:01:43,532 --> 00:01:44,980
another component.

25
00:01:44,980 --> 00:01:46,820
Then how do we do that?

26
00:01:46,820 --> 00:01:50,550
Now, the only way you are communicating
between the components

27
00:01:50,550 --> 00:01:52,125
is by using the router link.

28
00:01:52,125 --> 00:01:54,570
And/or to

29
00:01:54,570 --> 00:01:58,820
use the router module to do the navigation
from one component to another component.

30
00:01:58,820 --> 00:02:06,370
Now, this is where the ability to specify
parameter values within the URL for

31
00:02:06,370 --> 00:02:12,070
a component, the path for a component,
enables us to pass this information.

32
00:02:12,070 --> 00:02:16,690
So, for example,
if we want to be able to display a dish

33
00:02:16,690 --> 00:02:20,450
with an id 42 in the dishdetail component.

34
00:02:20,450 --> 00:02:25,680
If we had the ability to specify
something like /dishdetail/42.

35
00:02:25,680 --> 00:02:31,780
And then let the dishdetail pick up
the number 42 from the URL directly.

36
00:02:31,780 --> 00:02:37,000
Then we have facilitated a mechanism
to convey this information

37
00:02:37,000 --> 00:02:42,710
one component to another component when
we are navigating to the other component.

38
00:02:42,710 --> 00:02:47,389
This is what in Angular Router module
is referred to as a route parameter.

39
00:02:48,560 --> 00:02:50,400
How does a route parameter work?

40
00:02:50,400 --> 00:02:54,410
So when you specify a route
parameter in the path definition,

41
00:02:54,410 --> 00:02:57,260
this route parameter is
specified using a token.

42
00:02:57,260 --> 00:03:02,300
So when you specify the path
in the path specification for

43
00:03:02,300 --> 00:03:05,600
the routes,
you would specify a path like this.

44
00:03:05,600 --> 00:03:09,952
So you would say, dishdetail/:id.

45
00:03:09,952 --> 00:03:14,750
So where id becomes the token
which carries the route

46
00:03:14,750 --> 00:03:18,359
parameter to the specific component.

47
00:03:18,359 --> 00:03:21,200
The dishdetail component in this example.

48
00:03:21,200 --> 00:03:25,002
So this way, you can specify
a route parameter in the path.

49
00:03:25,002 --> 00:03:30,098
And then from another location,
you can pass in the parameter

50
00:03:30,098 --> 00:03:34,810
to the particular component
that needs this parameter.

51
00:03:34,810 --> 00:03:37,240
The dishdetail component in this example.

52
00:03:38,810 --> 00:03:42,510
Now, the next important question
that will arise in your mind is,

53
00:03:42,510 --> 00:03:44,610
how do we pass this route parameter?

54
00:03:44,610 --> 00:03:50,134
Now, when you'll think about it, when you
navigate through the dishdetail component.

55
00:03:50,134 --> 00:03:55,255
You are coming in from another component
by either clicking a link or using

56
00:03:55,255 --> 00:04:01,020
something called the navigate function
like the route module provides for us.

57
00:04:01,020 --> 00:04:06,240
We'll look at both ways of navigating
to a particular component.

58
00:04:06,240 --> 00:04:11,222
Now, if you need to specify the route
parameter, when you specify the link,

59
00:04:11,222 --> 00:04:16,070
recall that we were specifying
the link using the router link

60
00:04:16,070 --> 00:04:20,750
directive in our template files.

61
00:04:20,750 --> 00:04:23,470
Now, if you are going to specify
this in the template files,

62
00:04:23,470 --> 00:04:29,040
then the router link also
takes in an array as we see.

63
00:04:29,040 --> 00:04:31,500
A link parameter array,

64
00:04:31,500 --> 00:04:35,170
where you can explicitly specify
the parameter that is being conveyed.

65
00:04:35,170 --> 00:04:40,480
So, for example, in this example that
you see here, we are specifying a.

66
00:04:40,480 --> 00:04:42,850
And then you are doing an ngFor.

67
00:04:42,850 --> 00:04:47,723
So you are looping through
a set of JavaScript objects in

68
00:04:47,723 --> 00:04:50,720
a JavaScript object array.

69
00:04:50,720 --> 00:04:52,860
Then, when you specify the router link.

70
00:04:52,860 --> 00:04:55,770
So within there,
you can specify the router link.

71
00:04:55,770 --> 00:04:58,260
But now, surrounded by square brackets.

72
00:04:58,260 --> 00:05:05,150
And this will take in a value like
this has a link parameter array.

73
00:05:05,150 --> 00:05:08,768
So here, you can specify different
parts of the link parameter.

74
00:05:08,768 --> 00:05:15,370
And Angular Router will join these
together to form the actual URL.

75
00:05:15,370 --> 00:05:19,300
So here, you can see that the first
part of the link parameter is specified

76
00:05:19,300 --> 00:05:23,640
as a string here, so /dishdetail here.

77
00:05:23,640 --> 00:05:28,970
But the second part is specified
as a value which is being obtained

78
00:05:28,970 --> 00:05:30,070
from the dish.

79
00:05:31,130 --> 00:05:38,710
Which is the dish, the JavaScript object
from the JavaScript object array here.

80
00:05:38,710 --> 00:05:41,204
So each dish will carry a dish.id.

81
00:05:41,204 --> 00:05:44,090
So the dish.id can be specified as

82
00:05:44,090 --> 00:05:47,640
one of the values within this
link parameter array here.

83
00:05:47,640 --> 00:05:52,170
So when you click on this,
for the specific dish,

84
00:05:52,170 --> 00:05:57,130
this dish.id will be substituted
by the specific id for the dish.

85
00:05:57,130 --> 00:06:01,890
So, for example, if the id is 42,
then this will be replaced by 42.

86
00:06:01,890 --> 00:06:06,779
So when the Angular Router
receives this router link,

87
00:06:06,779 --> 00:06:11,783
then it will construct
the URL as /dishdetail/42.

88
00:06:11,783 --> 00:06:17,010
The 42 being the value of
the dish.id at this point.

89
00:06:17,010 --> 00:06:19,630
So that is how you can pass in parameter.

90
00:06:19,630 --> 00:06:21,500
The second part of the question,
of course,

91
00:06:21,500 --> 00:06:27,790
is how does the component retrieve
this value from the link parameter?

92
00:06:27,790 --> 00:06:30,130
That we will talk about in the next slide.

93
00:06:31,320 --> 00:06:36,380
Another way that you can cause this
navigation to the other component

94
00:06:36,380 --> 00:06:42,380
is also to use a method called navigate
that is provided by the router module.

95
00:06:42,380 --> 00:06:44,740
So you can say, this.router.navigate.

96
00:06:44,740 --> 00:06:47,888
So this can be included in
your TypeScript code or

97
00:06:47,888 --> 00:06:53,250
your JavaScript code to automatically
cause the navigation to the other.

98
00:06:53,250 --> 00:06:58,337
So this could be included
inside a method that you

99
00:06:58,337 --> 00:07:03,432
include in your component's
TypeScript code.

100
00:07:03,432 --> 00:07:08,575
And that can be invoked
from your template.

101
00:07:08,575 --> 00:07:11,921
Say, for example,
by clicking on a link there.

102
00:07:11,921 --> 00:07:17,097
So within there in the code,
you can include a statement like this,

103
00:07:17,097 --> 00:07:19,582
this.router.navigate.

104
00:07:19,582 --> 00:07:24,152
And this navigate method takes
the same link parameter array

105
00:07:24,152 --> 00:07:27,466
as the parameter value.

106
00:07:27,466 --> 00:07:33,056
So this will also enable this information
to be provided to the Angular Router so

107
00:07:33,056 --> 00:07:37,186
that it can navigate to
the other component.

108
00:07:37,186 --> 00:07:43,246
Now, let's go to the other
side of this equation.

109
00:07:43,246 --> 00:07:50,466
How does a component, like the dishdetail
component in this example,

110
00:07:50,466 --> 00:07:57,821
retrieve this value that is specified
as the token in the URL link there?

111
00:07:57,821 --> 00:08:02,789
Now, this is where
the Angular Router library provides

112
00:08:02,789 --> 00:08:07,940
a service called as
the ActivatedRoute service.

113
00:08:07,940 --> 00:08:12,913
This ActivatedRoute service can be taken
advantage of to be able to retrieve

114
00:08:12,913 --> 00:08:14,360
these values.

115
00:08:14,360 --> 00:08:18,556
Now, in particular,
to facilitate this parameter retrieval,

116
00:08:18,556 --> 00:08:22,689
the ActivatedRoute service
provides three different things.

117
00:08:22,689 --> 00:08:29,140
For example, it provides this
method to retrieve the URL.

118
00:08:29,140 --> 00:08:32,198
Which is an observable of the route path.

119
00:08:32,198 --> 00:08:37,085
Which is represented as an array
of strings for each route path.

120
00:08:37,085 --> 00:08:39,271
You have encountered this
word observable here.

121
00:08:39,271 --> 00:08:41,770
For the moment, hold on to that word.

122
00:08:41,770 --> 00:08:46,250
We will come back, look at what
an observable is in the next module.

123
00:08:46,250 --> 00:08:49,190
But for the moment,
what we realized is that this

124
00:08:49,190 --> 00:08:52,430
ActivatedRoute service
provides this observable.

125
00:08:53,970 --> 00:08:58,920
Similarly, the ActivatedRoute service also
provides another observable called params.

126
00:08:58,920 --> 00:09:03,920
This params observable makes
available to a component

127
00:09:03,920 --> 00:09:07,990
the parameter values that are being
passed in as the route parameter.

128
00:09:07,990 --> 00:09:12,260
So this params observable is
the one that we're going to use

129
00:09:12,260 --> 00:09:15,740
to retrieve this value within
the dishdetail component.

130
00:09:15,740 --> 00:09:18,290
You will see the exact
method of doing that

131
00:09:18,290 --> 00:09:21,860
in the exercise that follows this lecture.

132
00:09:21,860 --> 00:09:29,740
Similarly, you can also pass in query
parameters to another component.

133
00:09:29,740 --> 00:09:33,185
Now, we are not going to deal with an
example of the query parameters right now.

134
00:09:33,185 --> 00:09:39,480
But later on, we might encounter
an example of how you can pass in query

135
00:09:39,480 --> 00:09:46,010
parameters through the ActivatedRoute
service to another component.

136
00:09:46,010 --> 00:09:50,870
With this understanding,
let's go ahead to the next exercise.

137
00:09:50,870 --> 00:09:54,790
We will continue to develop
the single page application.

138
00:09:54,790 --> 00:09:59,517
And then enable the use of
a route parameter to pass in

139
00:09:59,517 --> 00:10:03,605
the id of a dish to
the dishdetail component.

140
00:10:03,605 --> 00:10:09,990
So that the dishdetail component, in turn,
can use this id to query the dish service.

141
00:10:09,990 --> 00:10:14,280
To obtain the details of that
specific dish that it is

142
00:10:14,280 --> 00:10:17,406
supposed to display within its view.

143
00:10:17,406 --> 00:10:24,269
[MUSIC]