1 00:00:03,649 --> 00:00:10,244 Time to get started on the very first assignment in this course. 2 00:00:10,244 --> 00:00:14,564 In this assignment, you're going to be working with angular components. 3 00:00:14,564 --> 00:00:18,172 You're going to create a new component called dishdetail 4 00:00:18,172 --> 00:00:21,690 to add it into your angular application, 5 00:00:21,690 --> 00:00:29,399 and you will update its template, so that it shows the details of a specific dish. 6 00:00:29,399 --> 00:00:37,645 Earlier, in the previous exercise, we introduced a card into our menu component. 7 00:00:37,645 --> 00:00:41,954 We're going to remove that card, and instead include the 8 00:00:41,954 --> 00:00:46,929 dishdetail component in place of that card so that the 9 00:00:46,929 --> 00:00:53,009 dishdetail component will be able to display its information 10 00:00:53,009 --> 00:00:56,263 in that part of the screen. 11 00:00:56,263 --> 00:01:01,435 Your first task is to create the dishdetail component. 12 00:01:01,435 --> 00:01:08,060 At the end of the first task, once you have created the dishdetail component, 13 00:01:08,060 --> 00:01:11,810 then, in the menu components template file, 14 00:01:11,810 --> 00:01:18,020 you're going to replace that card by the selector 15 00:01:18,020 --> 00:01:19,430 of the dishdetail component in there, 16 00:01:19,430 --> 00:01:23,510 so that the details of the dishdetail component will be displayed 17 00:01:23,510 --> 00:01:27,579 right below the menu in the menu component. 18 00:01:27,579 --> 00:01:31,564 We have already seen how you can add that 19 00:01:31,564 --> 00:01:35,750 selector from one component into another component. 20 00:01:35,750 --> 00:01:37,693 When we created the menu component, 21 00:01:37,693 --> 00:01:41,500 we included that into the app component, 22 00:01:41,500 --> 00:01:48,710 so that at the end of the first task, this would be the result on your browser, 23 00:01:48,710 --> 00:01:53,454 where, instead of the card displaying the details of the dish, 24 00:01:53,454 --> 00:01:58,920 you will see these words called "dishdetail works!" at the bottom of the page. 25 00:01:58,920 --> 00:02:02,390 Once you complete this, then you will download 26 00:02:02,390 --> 00:02:09,349 a preconfigured dishdetail components template file with some missing pieces, 27 00:02:09,349 --> 00:02:18,474 and then substitute into place in the template of your dishdetail component. 28 00:02:18,474 --> 00:02:24,439 Once you substitute the supplied dishdetail component's template, 29 00:02:24,439 --> 00:02:31,474 then you will see the page updated like this. 30 00:02:31,474 --> 00:02:35,692 So, you will see two parts in the page here, one which says 31 00:02:35,692 --> 00:02:39,480 "Display the details of the dish here." 32 00:02:39,480 --> 00:02:43,909 You're going to be using a card component to create the details of the dish, 33 00:02:43,909 --> 00:02:47,145 and display that dish here. 34 00:02:47,145 --> 00:02:52,009 In addition, you will also display a set of comments about the dish 35 00:02:52,009 --> 00:02:58,444 in the second part of this component here. 36 00:02:58,444 --> 00:03:04,270 Now, to get you started, in the assignment instructions, 37 00:03:04,270 --> 00:03:09,710 I have supplied you with a new JavaScript object 38 00:03:09,710 --> 00:03:11,719 containing the details of the dish, 39 00:03:11,719 --> 00:03:15,770 including the comments about that dish. 40 00:03:15,770 --> 00:03:18,875 You're going to use that information in order to construct 41 00:03:18,875 --> 00:03:21,740 these two: the card component to display 42 00:03:21,740 --> 00:03:26,944 the details of the dish, and the list of comments here. 43 00:03:26,944 --> 00:03:32,699 Your second task is to then update your 44 00:03:32,699 --> 00:03:39,349 TypeScript file to include the new dish variable in there, 45 00:03:39,349 --> 00:03:45,379 and then use the dish variable with the card component, 46 00:03:45,379 --> 00:03:52,710 and then prepare the card component here to display the details of the dish. 47 00:03:52,710 --> 00:03:55,400 Once you complete the second task, 48 00:03:55,400 --> 00:03:59,330 in your application you will see that, 49 00:03:59,330 --> 00:04:04,699 just below the menu, you will see the details of the 50 00:04:04,699 --> 00:04:09,590 given dish information being displayed in a card like this here, 51 00:04:09,590 --> 00:04:13,520 so you can see the title, the image, 52 00:04:13,520 --> 00:04:17,129 and also the description done below here. 53 00:04:17,129 --> 00:04:22,519 Now, after you complete this, then you will move on to the third task. 54 00:04:22,519 --> 00:04:29,120 In the third task, you will use the comments that are also enclosed inside the 55 00:04:29,120 --> 00:04:35,239 dish that we have supplied to you in the JavaScript object, 56 00:04:35,239 --> 00:04:40,819 and then use that to construct and display a list of comments here. 57 00:04:40,819 --> 00:04:43,235 At the end of the third task, 58 00:04:43,235 --> 00:04:48,595 this is what you will see being displayed on the right side of your dish. 59 00:04:48,595 --> 00:04:52,235 You can see that you have a header here with 60 00:04:52,235 --> 00:04:54,019 the word "Comments," 61 00:04:54,019 --> 00:04:58,149 and then you have a list of comments being displayed here. 62 00:04:58,149 --> 00:05:03,480 The information for constructing these comments is available inside the 63 00:05:03,480 --> 00:05:07,699 dish JavaScript object that we have given for you. 64 00:05:07,699 --> 00:05:11,610 In particular, note that this is the actual comment, 65 00:05:11,610 --> 00:05:15,505 this is the number of stars given to that comment, 66 00:05:15,505 --> 00:05:21,259 and this is where we display the author's name with two dashes in front, 67 00:05:21,259 --> 00:05:25,589 and note, at the end, we display the date here. 68 00:05:25,589 --> 00:05:28,774 In order to be able to construct this date here, 69 00:05:28,774 --> 00:05:33,600 you need to use an angular pipe named Date. 70 00:05:33,600 --> 00:05:37,610 We have already seen the use of a built-in pipe called Uppercase 71 00:05:37,610 --> 00:05:39,939 in the previous exercise, 72 00:05:39,939 --> 00:05:45,379 so you simply use the Date pipe in order to create this 73 00:05:45,379 --> 00:05:50,660 date to be displayed to the right of the author's name here. 74 00:05:50,660 --> 00:05:53,839 So, those are the hints to get you started with 75 00:05:53,839 --> 00:05:59,240 this third task in your first assignment. 76 00:05:59,240 --> 00:06:02,849 Have fun completing the first assignment. 77 00:06:02,849 --> 00:06:04,620 Whatever resources that you need, 78 00:06:04,620 --> 00:06:09,980 the preconfigured half-completed template file 79 00:06:09,980 --> 00:06:14,115 and the dish JavaScript object are both available 80 00:06:14,115 --> 00:06:18,649 in the instructions for this assignment.