Time to get started on the very first assignment in this course.
In this assignment, you're going to be working with angular components.
You're going to create a new component called dishdetail
to add it into your angular application,
and you will update its template, so that it shows the details of a specific dish.
Earlier, in the previous exercise, we introduced a card into our menu component.
We're going to remove that card, and instead include the
dishdetail component in place of that card so that the
dishdetail component will be able to display its information
in that part of the screen.
Your first task is to create the dishdetail component.
At the end of the first task, once you have created the dishdetail component,
then, in the menu components template file,
you're going to replace that card by the selector
of the dishdetail component in there,
so that the details of the dishdetail component will be displayed
right below the menu in the menu component.
We have already seen how you can add that
selector from one component into another component.
When we created the menu component,
we included that into the app component,
so that at the end of the first task, this would be the result on your browser,
where, instead of the card displaying the details of the dish,
you will see these words called "dishdetail works!" at the bottom of the page.
Once you complete this, then you will download
a preconfigured dishdetail components template file with some missing pieces,
and then substitute into place in the template of your dishdetail component.
Once you substitute the supplied dishdetail component's template,
then you will see the page updated like this.
So, you will see two parts in the page here, one which says
"Display the details of the dish here."
You're going to be using a card component to create the details of the dish,
and display that dish here.
In addition, you will also display a set of comments about the dish
in the second part of this component here.
Now, to get you started, in the assignment instructions,
I have supplied you with a new JavaScript object
containing the details of the dish,
including the comments about that dish.
You're going to use that information in order to construct
these two: the card component to display
the details of the dish, and the list of comments here.
Your second task is to then update your
TypeScript file to include the new dish variable in there,
and then use the dish variable with the card component,
and then prepare the card component here to display the details of the dish.
Once you complete the second task,
in your application you will see that,
just below the menu, you will see the details of the
given dish information being displayed in a card like this here,
so you can see the title, the image,
and also the description done below here.
Now, after you complete this, then you will move on to the third task.
In the third task, you will use the comments that are also enclosed inside the
dish that we have supplied to you in the JavaScript object,
and then use that to construct and display a list of comments here.
At the end of the third task,
this is what you will see being displayed on the right side of your dish.
You can see that you have a header here with
the word "Comments,"
and then you have a list of comments being displayed here.
The information for constructing these comments is available inside the
dish JavaScript object that we have given for you.
In particular, note that this is the actual comment,
this is the number of stars given to that comment,
and this is where we display the author's name with two dashes in front,
and note, at the end, we display the date here.
In order to be able to construct this date here,
you need to use an angular pipe named Date.
We have already seen the use of a built-in pipe called Uppercase
in the previous exercise,
so you simply use the Date pipe in order to create this
date to be displayed to the right of the author's name here.
So, those are the hints to get you started with
this third task in your first assignment.
Have fun completing the first assignment.
Whatever resources that you need,
the preconfigured half-completed template file
and the dish JavaScript object are both available
in the instructions for this assignment.