Assign 01 Instructions
User Manual: Pdf
Open the PDF directly: View PDF 
.
Page Count: 4
Back to Week 1 Lessons Prev Next
less
Discussions
Peer-graded Assignment: Angular Components
You submitted!
Your work is ready to be reviewed by classmates. Next, you need to review your classmates'
work. We'll email you when your grade is ready. Your grade should be ready by January 31,
11:59 PM PST.
Review Classmates' Work
Instructions
My submission
In this assignment you will add a new component to the Angular application to show the details of a selected
dish. You will use the Angular Material card component and the list component to prepare the template for
this new component.
Step-By-Step Assignment Instructions
Objectives and Outcomes
In this assignment, you will continue to work with the Angular application that you have been developing in the exercises. You will
add a new component named
dishdetail
that will display the details of a selected dish. You will then design the template for the
component using Angular material components. At the end of this assignment, you should have completed the following tasks:
Created a new dishdetail component and added it to your Angular application and included it into the template of the menu
component.
Updated the template of the dishdetail component to display the details of the selected dish using an Angular card component.
Updated the template of the dishdetail component to display the list of comments about the dish using the Angular material list
component.
Assignment Requirements
This assignment requires you to complete the following tasks. Detailed instructions for each task are given below. The picture of
the completed web page included below indicates the location within the web page that will be updated by the three tasks.
Task 1
In this task you will be adding a new
dishdetail
component to your Angular application and include the component into the menu
component's template so that the details of a specic dish are displayed there:
Use Angular CLI to create a new component named
dishdetail
,
Replace the card showing the selected dish in menu component's template with the dishdetail component, and
Update the template of the dishdetail component with the following code:
Help Center
Task 2
In this task you will be adding a card component to the dishdetail template to display the details of the dish given above:
Add a new constant to the dishdetail.component.ts le named DISH as follows, and initialize it to the JavaScript object given
below that contains the details of the dish and comments about the dish:
NOTE: Do not use the Dish type from the dish.ts le to declare either the const DISH or the variable dish below to be of the type
Dish. We need to update the Dish type which will be done in the next module.
Now introduce a new variable in the dishdetail.component.ts le in the dishdetail class called dish and set it equal to the DISH
constant above:
<div class="container"
fxLayout="row"
fxLayout.sm="column"
fxLayout.xs="column"
fxLayoutAlign.gt-md="space-around center"
fxLayoutGap="10px"
fxLayoutGap.xs="0">
<div fxFlex="40">
<p>Display the details of the Dish here</p>
</div>
<div fxFlex="40">
<p>Display the list of comments here</p>
</div>
</div>
const DISH = {
name: 'Uthappizza',
image: '/assets/images/uthappizza.png',
category: 'mains',
label: 'Hot',
price: '4.99',
description: 'A unique combination of Indian Uthappam (pancake) and Italian
pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia
onion, Guntur chillies and Buffalo Paneer.',
comments: [
{
rating: 5,
comment: "Imagine all the eatables, living in conFusion!",
author: "John Lemon",
date: "2012-10-16T17:57:28.556094Z"
},
{
rating: 4,
comment: "Sends anyone to heaven, I wish I could get my mother-in-law to
eat it!",
author: "Paul McVites",
date: "2014-09-05T17:57:28.556094Z"
},
{
rating: 3,
comment: "Eat it, just eat it!",
author: "Michael Jaikishan",
date: "2015-02-13T17:57:28.556094Z"
},
{
rating: 4,
comment: "Ultimate, Reaching for the stars!",
author: "Ringo Starry",
date: "2013-12-02T17:57:28.556094Z"
},
{
rating: 2,
comment: "It's your birthday, we're gonna party!",
author: "25 Cent",
date: "2011-12-02T17:57:28.556094Z"
}
]
};
dish = DISH;
Help Center
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
1
The Angular material card component should be used to display the details of the dish as shown above. Please remember to use
the Angular "uppercase" pipe on the name displayed in the card title. Also apply the *ngIf="dish" structural directive to both the
<md-card> that displays the details of the dish.
Task 3
In this task you will use the comments that are included in the dish object above to display a list of the comments for the dish.
Please use your JavaScript knowledge to recall how you would access an inner property in a JavaScript object that itself points to an
array of JavaScript objects (comments). This task involves the following steps:
Use the Angular material list to display the list of comments as shown below. Also apply the *ngIf="dish" structural directive to
both the <md-list> that displays the list of comments for the dish.
Display the date of the comment by processing it through the Angular built-in
date
pipe.
Help Center
less
Review criteria
Upon completion of the assignment, your submission will be reviewed based on the following criteria:
Task 1:
A new
dishdetail
component has been added to your Angular application.
Included the dishdetail into your menu component's template.
Updated the template of the dishdetail component.
Task 2:
Added a new dish variable in your dishdetail.component.ts le and initialized it to the JavaScript object given above.
Used the Angular material card component to display the details of the dish.
Used the Angular uppercase pipe to turn the dish's name into all uppercase letters in the card title.
Task 3:
Included a list of comments about the dish into the dishdetail template using the Angular material list component.
Display the date of the comment using the Angular date pipe.
Help Center
