Let's now continue to work on
the single page application that we have been developing in our exercises.
So far, we have integrated the home component,
the menu component, and the contact component into our single page application.
The dish detail component currently is being used at the bottom of the menu component.
So, when you click on any of the items in the menu,
the details of the dish are displayed right below in the menu.
Now, we're going to leverage another support that the Angular router module provides,
which enables us to define a route with a parameter included in the route definition.
This way, we can pass information to another component,
and then from there,
display information in the other component.
How does this work?
Let's learn that by doing this exercise.
So, getting back to our application,
in this application, when you look at the menu,
when you click on any item in the menu,
the details of the selected item are displayed right below in the menu.
Now, I would want to separate the view of the details
of this particular dish into its own separate view.
When I click on any one of these,
I want to be able to display the details of the dish,
specifically in a view in this application.
To achieve that, we're going to take advantage, as I said,
with the route parameters to enable
us to support that kind of a behavior in our application.
How do we go about doing that?
Let's do that by starting out with defining a new route with a parameter here.
To make use of the dish detail component,
we will go into the routes,
and then define a new route after menu here.
Look at the way the route is defined here.
So, this is path, dishdetail.
So, this dish detail is part of the dish detail component.
So, it has its own view.
Now, I want to be able to navigate to that view,
but with a parameter ID,
because this dish detail view might display any one of the dishes in my menu.
So, I want to be able to display a selected dish in the dish detail.
Now, that's selected dish will have an ID,
and I want to pass that ID into my dish detailed components,
so that it can render the details of that particular dish.
So, in Angular router,
it supports passing in parameters by defining route parameters like this,
in the definition of the router itself.
So, within the path,
if I say colon,
so that colon can be followed by a name which will act as a route parameter.
So, in this case, I'm going to use the parameter name as an ID.
This ID refers to the dish ID that we have already given to each of our dishes.
Now, this will take me to the dish detail component.
So, we'll add in this new route to our Angular route definition here.
Save the changes.
Now, in the menu component,
so when I open the menu components template file,
in the menu component,
I am displaying the dish at the bottom here.
So, I don't want to do that.
So, I'm going to delete that part from my menu components template.
Instead, what I realize is that right there,
I am able to access the particular dish.
So, when the dish is clicked,
instead of doing this click here,
so I'm going to remove this click here, and instead,
I'm going to define a new parameter here called a routerLink.
You'll see the use of the routerLink here.
Now, this routerLink takes in values which you can supply in your template like this.
So, you can supply that as an array here.
Within the array, you can supply two parts of an array.
So, dishdetail.
So, you saw that when I defined the route, I said "/dishdetail/:id."
So, the Angular router will pass in whatever parameter that I supply
here as part of the second part of that URL there.
So, now, along with the dish detail,
I'm going to construct my routerLink using dish detail,
and also the dish ID here.
So, this dish ID refer to the specific dish that I have
selected from the array of dishes here.
So, that dish ID,
I have access to it here.
So, I'm going to use that as the second part inside this array of parameters,
that I'm going to pass in for my routerLink here.
So, if I define it like this,
then when I click on that particular item in my menu,
then that detailed, the dish ID,
together with this dishdetail,
will be passed in as the router link.
So, that information will now become available through
my Angular routers to my dish detail components.
So, the router enables the dish detail component to retrieve this value,
dish ID, from the Angular route when this information is passed into it.
How do we do that? For that,
we need to go to the dish detail component and fix that up to receive this information.
So, after making these changes to the menu component,
let's now switch to the dish detail component.
Inside the dish detail component,
you see that currently,
I was receiving the dish as an input here.
I am no longer going to receive the dishes and input.
So, I will just leave that as such,
as simply a dish.
I no longer need the input because I am not passing in this information using the dish,
within square brackets that I included in my menu component.
Instead, this information about the specific dishes coming in through the Angular router.
How do I get access to that dish ID?
So, to do that,
I go in here.
Into this application, I'm going to add in two more imports here,
one of them called Params.
So, this Params gives me access to
the router parameters that are available when I come in.
So, this is from the Angular router, Params,
and also another one that I need is the Location.
Location enables me to track the location of
my page in the history of my browser.
So, that would be useful for me to navigate back from my dish detail when I need to.
You will see me using that a little bit later.
So, two things that I need to import: Params and Location.
We will see how we make use of these two in our application.
So, along with this,
we will go in and in here, for the constructor,
now we note that the dish value is now not available from my menu component.
But instead, I have to explicitly go and fetch this from the DishService.
So, I'm going to import
the DishService also into my dish detail component.
DishService here.
So, this will enable me to go and fetch a specific dish from the Dish Service.
So, you recall that we already have
the getDish method and the Dish Service which we can use.
Now, the next important thing for us is to get hold of the dish id.
Now, how do we get hold of the dish id.
So, this is where in the constructor.
Now, I need to make all these services available,
so I will say Dish Service.
Then, the other one is Location.
So, Location is another service that is available to me.
So, both of these will be used within my application.
So, when this dish component is initialized,
then at this point in the ngOnInit,
I can go and fetch the information about the specific dish from the Params.
So, how do we do that? So, we do let id.
So, this is where I'm going to fetch the id,
so I would say plus this.
Also to fetch the route value,
I need to inject another service called ActivatedRoute service.
That is part of the Angular routers.
So this ActivatedRoute service provides me with access to the route here.
So, I would say,
so along with the DishService I also need to define one more called
as route which would be the ActivatedRoute service here.
So, all these three will be available to me.
So right there, I can ask for
this route, Snapshot, Params.
This Params is an array to
which I can index using the id as the value, so Params id.
This fetches me the id from the parameter.
So, when I define this URL,
the URL for this would be defined as Dishdetail.
For example, DishDetail 0,
DishDetail 1, DishDetail 2, and so on.
So, that's how the URLs for these components are going to be defined there.
So, that value I am going to fetch in here.
Now, once I get hold of the idea of the dish, then I can say,
this dish equal to DishService
and get dish and the getDish will take the id as the parameter here.
So, with this, when I click on a dish in my menu component,
that link that I have the router link that I have setup there,
will pass in the dish id to my Router as RouterParameter,
and that will become available to me in
my DishDetail component by accessing the ActivatedRoute service here.
So, once I get hold of it,
then I can use that value to query the dish here.
Now, this is not the complete way of doing things.
Later on in the next module,
we're going to use something called Reactive JavaScript.
Then, at that point, I will come back to redefine this in
a different way so that my DishDetail component can keep track of
any changes that I make to my URL and
automatically change the information that is being displayed by this component.
We'll come to that in one of the later exercises in the next module,
but this works fine for the moment so we're going to use this.
In addition, now when I go to the details of the dish
I want to be able to get back to the menu from the dish.
So, I'm going to add in a back button into my card a back button into my card,
which when pressed will take me back to the previous location in my browser.
So, to do that I'm going to add in a method here called GoBack,
which will essentially do make use
of the Location service that I've included up here.
The Location service provides a method called Back that allows me to go
back into the previous item in the browser history.
So, that way, I will navigate back to the menu from the details here.
So, this GoBack method is added in here.
Now, we need to go and fix up the DishDetail component here.
So, in the DishDetail components template file,
here we have two buttons that are Like and Share button.
I'm going to add in one more button here.
For this button, I would add in,
if this button is clicked,
this will result in a call to the GoBack method that I
have just added to my DishDetail component.tsfile.
So, this would be a Back button there.
While we're at it,
we might as well fix the Footer components links also.
So, going to the footercomponent.htmlfile at the bottom here where we have this links,
I'm going to add in the RouterLink here with
the parameter home for the first one,
and then menu for the second one,
and contact us for the third one in the Footer here.
Let's save the changes.
Going to your application,
if you now click on the menu,
the menu items are shown here.
If we click on any one of the menu items,
you would notice that the details of the dish are shown in a separate view here.
This details, as you can see,
this is exactly what the DishDetail component was displaying earlier,
but at the bottom of the menu in the menu component,
we now have that displaying in a separate view.
Now, this DishDetail component,
now you can go back to the menu by clicking on the Back button.
So, when you click on the Back button,
you're back at the menu.
When you click on another item,
you see that the details of that particular item is being displayed here,
similarly for the third too and then you can go back.
Now, when you click on any one of these items,
note the value of the URL in the address bar.
So, this is local host 4,200 slash DishDetail slash 0.
This zero is the id of this dish.
So, that value is being passed in,
and that is how the DishDetail component here is being shown here, go back.
When you click on the other item,
you can see that now in the URLs says, DishDetail slash 1.
Similarly, for the fourth one,
it says DishDetail slash 3, and so on.
So, this Parameter value is the one that indicates to
the DishDetail component which particular dish
should be shown by the DishDetail component.
That is what is being used by the DishDetail component to retrieve the information about
that specific dish from the DishService using the GetDish method,
and then that information is being displayed in the view of the DishDetail component.
So, now in this exercise,
we have learned how we can use RouteParameters to pass information to a component,
and then the component get access to the Parameter and then uses that RouteParameter
to decide the way it renders
the view or fetch the information and render the view accordingly.
With this, we complete this exercise.
We have now almost completed constructing our single page application
for the restaurant application that we have been working on so far.
This is a good time for you to do a git commit with the message,
Single-Page Application part 2.