Going to the dishes.ts file,
you see that the comments contains
one property called as a rating which seems to be a number,
then you have a comment which is a string and
author which is a string and a date which is also a string.
So, we need to define four properties for my comment class here.
So, going back to the comment class,
I would define rating as number.
So, in type script,
everything is a number here then we had comment which is a string author,
which is also a string,
and then date which is also a string here.
So, these are the four properties that we have here.
Now, obviously we have seen how we use the date string in the previous exercise,
and in the assignment how we made use of
the date string to show the date for the comment there.
Now, in case you're wondering,
what does this date string actually contain?
Going here, you will see that this date string is with a certain format.
So, this is the standard format for storing a date here.
This date format is the ISO OSI way of specifying the date format.
So, we're just going to use this,
so this is a standardized format that is used also in
many programming languages which allows you to store the data as a string here,
so I'm just going to make use of it as such here.
After making the changes to the
dish.ts file like this here and then also adding in the comment class here,
we now see that the dishes.ts file no longer has those red lines because
the comment has been added in as an object array to my dish class here.
So, this works fine so far.
Now, how do we make use of this?
Now to make use of this,
we will go to the menu component.ts,
and then here we have this constant defined here.
Now, this is not the right way of doing it
later on you will see me using a service for all this.
So, let me cut out this constant from here completely and instead of using that constant,
I am going to now import dishes
from the shared folder
here, shared dishes here.
So, notice that this dishes folder is exporting the dishes constant here.
So, that's the reason why we're able to make use of it.
So going back to the dishes one here,
I need to export this from here,
so I would say export.
Constant. So, when I do that,
then in my menu component I can see that my dishes can be imported here correctly.
Then, the rest of the code here will work just fine without any changes.
You will see that if you save the values now
and then you look at your web application in the browser,
it will render just fine even after these changes.
After saving all the changes that you have done so far in all the files,
if you go and look at your web page,
your web page renders just like before.
Now, the second part of the problem.
We want to be able to communicate.
When we click on any one of these menu items,
we want to be able to communicate that information so that
the corresponding dish will be rendered here.
So, this is where we're going to take the help of
the data binding that we have learned so far.
Going back to the menu components template file,
what we are going to do is that for
this "app-dishdetail" that you include at the bottom here,
to add in the dish detail components template to the menu components template,
we're going to add in a property called as Dish.
Then, we will assign this to be "selectedDish."
You will recall that the selected dish is a variable that we have
defined in our menu components TypeScript file here.
So, that way; that value of that selected dish will
be passed in through this property dish here.
Now, we will see how the dish detail component can retrieve this information
and then make use of it well in the next step in the exercise.
Now, while we are here,
we'll also fix up the other issue that we need to deal with.
That is, when any of the menu items is clicked,
then it'll generate a click event and we want that information to be
delivered to our menu component TypeScript file.
So, to do that, we'll go into menu grid lists that we have defined here.
For this grid tile here,
what I'm going to do is to define the click event here.
So, for the click event,
what I'm going to do is I'm going to call on
select method that I will define inside my menu component.ts file.
To this onSelect method,
I'm going to supply the dish as the parameter here.
What is this dish?
This dish is exactly this dish that you have selected in
this "let dish of dishes" in the ngFor syntax here.
So, that specific dish,
out of the array of dishes that you've selected here,
will be passed in as a parameter to this onSelect method,
what we're going to implement in our menu component.ts file.
So, now that we have done this,
so this is the handler that needs to be implemented.
Let's go to the menu component file and then fix up
this file to implement this handler in there.
So, when you do a click on any one of the menu items,
then the corresponding handle will be called and
the specific dish information will be passed in as a parameter here.
Going to menu component.ts file, now,
the selected dish will be assigned a value based upon which dish I select.
So, I'm going to remove that part and then right below here,
I'm going to implement the onSelect method here.
So, for the onSelect method,
this will obtain a parameter which is the dish parameter.
When that dish parameter comes in,
I'm going to assign this selectedDish equal to dish,
the parameter that came in as the value for the onSelect method here.
So, this is it.
So, when you click on any one of those items in the menu,
any one of the dishes in the menu,
that dish information will be passed in through this and then
the selected dish will be assigned to that dish object here.
Now, we have how the information comes in from the DOM.
The specific click will cause the dish information to
be available to us and the selected dish will be assigned that value.
Now, going back to the menu component HTML file,
we see that we have already assigned this dish property to selectedDish.
So, that way, that selected dish value is being passed
in through this dish property to this app-dishdetail here.
Now, how does my dish detail component get hold of this information?
For that, we're going to go to the dish detail component and fix that.
Going to the dish detail component,
the first thing that I'm going to do is delete
this dish constant from my dish detail component.
I no longer need it.
Now, when a property is being bound,
like what we have seen in the menu component HTML file,
then in my dish detail file,
I can use another module called as the Input Module.
Then, for this dish,
I'm going to simply declare that as DISH.
Now, this input module allows me to declare a decorator
for this dish variable that I defined here,
like this, at input with the parenthesis here to that dish here.
Then, also, I need to import
the dish class
from shared dish here.
So, with this, so what has happened is that I am making use of the input module.
So, this is a way for you to supply information into a component from another component.
You bind a property in the template of
the other component as we saw in the menu component.html file,
and then that will be available as input to this component by
declaring a variable and then calling input decorator for that.
Now, with this, let's save the changes to all the files that we have made
and then have a look at the angular replication.
Going to our browser,
we see that in this Angular replication,
nothing is being displayed here.
Because right now, the selected dish,
we have not selected any one of the dishes so also the selected dish
is an empty object there.
So, we use the ngIf in the template for the dish detail.
So, taking a quick look at the dish details template,
you have implemented this as part of your assignment.
So, you should have used the ngIf with the dish for both the code,
as well as the MD list there.
So, if you do that,
then when the dish is currently unselected,
then nothing will be displayed at the bottom.
But the moment I click on any one of the dishes,
then you immediately see the details of the dish being displayed at the bottom here.
Now I can select the second dish and then immediately,
you'll notice that the dish details being displayed below is changed.
So, anytime I click on any one of these dishes,
the details of that specific dish,
including the comments will be displayed at the bottom here.
So, this is exactly what we want to achieve in this particular exercise.
So, here, you have seen the use of data binding, three different kinds,
including the event and event handler,
and also you saw how we can make use of the input module to be able
to retrieve information into a component coming in from another component.
With this, we complete this exercise,
where we have learned how to make use of various data
binding features available in Angular to implement our application.
This is a good time for you to do a git commit with the message data binding.
