[MUSIC]
Using the Angular Router, we have already learned how we can navigate
from one view to another view using the router link directive to specify the link.
And also the router module, enabling us with the specification of the path,
to navigate to the views of the different components.
Now, let's take an example of the dishdetail component.
So far, the dishdetail component has been working by receiving the details
of the specific dish that it needs to display from the menu component.
But this was facilitated because the dishdetail component had a property
that was sending in the value.
And then we were using the input decorator for
the variable inside the dishdetail component to get hold of that value that
was being passed in from the menu component.
Now, when you have these components being routed to using a router,
this connection between the components no longer exists.
So we need to leverage the Angular Router to be able to pass
information from one component to the other component.
And this is usually done in the form of parameters.
Parameters that can be either specified as route parameters,
as we will learn a little bit later, or query parameters.
So for the Angular Router, what we have learned so
far is that the paths are all specified as a URL.
Suppose you have a need to pass a parameter value from one component to
another component.
Then how do we do that?
Now, the only way you are communicating between the components
is by using the router link.
And/or to
use the router module to do the navigation from one component to another component.
Now, this is where the ability to specify parameter values within the URL for
a component, the path for a component, enables us to pass this information.
So, for example, if we want to be able to display a dish
with an id 42 in the dishdetail component.
If we had the ability to specify something like /dishdetail/42.
And then let the dishdetail pick up the number 42 from the URL directly.
Then we have facilitated a mechanism to convey this information
one component to another component when we are navigating to the other component.
This is what in Angular Router module is referred to as a route parameter.
How does a route parameter work?
So when you specify a route parameter in the path definition,
this route parameter is specified using a token.
So when you specify the path in the path specification for
the routes, you would specify a path like this.
So you would say, dishdetail/:id.
So where id becomes the token which carries the route
parameter to the specific component.
The dishdetail component in this example.
So this way, you can specify a route parameter in the path.
And then from another location, you can pass in the parameter
to the particular component that needs this parameter.
The dishdetail component in this example.
Now, the next important question that will arise in your mind is,
how do we pass this route parameter?
Now, when you'll think about it, when you navigate through the dishdetail component.
You are coming in from another component by either clicking a link or using
something called the navigate function like the route module provides for us.
We'll look at both ways of navigating to a particular component.
Now, if you need to specify the route parameter, when you specify the link,
recall that we were specifying the link using the router link
directive in our template files.
Now, if you are going to specify this in the template files,
then the router link also takes in an array as we see.
A link parameter array,
where you can explicitly specify the parameter that is being conveyed.
So, for example, in this example that you see here, we are specifying a.
And then you are doing an ngFor.
So you are looping through a set of JavaScript objects in
a JavaScript object array.
Then, when you specify the router link.
So within there, you can specify the router link.
But now, surrounded by square brackets.
And this will take in a value like this has a link parameter array.
So here, you can specify different parts of the link parameter.
And Angular Router will join these together to form the actual URL.
So here, you can see that the first part of the link parameter is specified
as a string here, so /dishdetail here.
But the second part is specified as a value which is being obtained
from the dish.
Which is the dish, the JavaScript object from the JavaScript object array here.
So each dish will carry a dish.id.
So the dish.id can be specified as
one of the values within this link parameter array here.
So when you click on this, for the specific dish,
this dish.id will be substituted by the specific id for the dish.
So, for example, if the id is 42, then this will be replaced by 42.
So when the Angular Router receives this router link,
then it will construct the URL as /dishdetail/42.
The 42 being the value of the dish.id at this point.
So that is how you can pass in parameter.
The second part of the question, of course,
is how does the component retrieve this value from the link parameter?
That we will talk about in the next slide.
Another way that you can cause this navigation to the other component
is also to use a method called navigate that is provided by the router module.
So you can say, this.router.navigate.
So this can be included in your TypeScript code or
your JavaScript code to automatically cause the navigation to the other.
So this could be included inside a method that you
include in your component's TypeScript code.
And that can be invoked from your template.
Say, for example, by clicking on a link there.
So within there in the code, you can include a statement like this,
this.router.navigate.
And this navigate method takes the same link parameter array
as the parameter value.
So this will also enable this information to be provided to the Angular Router so
that it can navigate to the other component.
Now, let's go to the other side of this equation.
How does a component, like the dishdetail component in this example,
retrieve this value that is specified as the token in the URL link there?
Now, this is where the Angular Router library provides
a service called as the ActivatedRoute service.
This ActivatedRoute service can be taken advantage of to be able to retrieve
these values.
Now, in particular, to facilitate this parameter retrieval,
the ActivatedRoute service provides three different things.
For example, it provides this method to retrieve the URL.
Which is an observable of the route path.
Which is represented as an array of strings for each route path.
You have encountered this word observable here.
For the moment, hold on to that word.
We will come back, look at what an observable is in the next module.
But for the moment, what we realized is that this
ActivatedRoute service provides this observable.
Similarly, the ActivatedRoute service also provides another observable called params.
This params observable makes available to a component
the parameter values that are being passed in as the route parameter.
So this params observable is the one that we're going to use
to retrieve this value within the dishdetail component.
You will see the exact method of doing that
in the exercise that follows this lecture.
Similarly, you can also pass in query parameters to another component.
Now, we are not going to deal with an example of the query parameters right now.
But later on, we might encounter an example of how you can pass in query
parameters through the ActivatedRoute service to another component.
With this understanding, let's go ahead to the next exercise.
We will continue to develop the single page application.
And then enable the use of a route parameter to pass in
the id of a dish to the dishdetail component.
So that the dishdetail component, in turn, can use this id to query the dish service.
To obtain the details of that specific dish that it is
supposed to display within its view.
[MUSIC]