Book
Submodule 20.2: Data Binding - Practice
Submodule 20.2: Data Binding - Practice
Completion requirements
View
Updating the .html files
Open menu.component.html
and update the class media with the Event binding (click) = "onSelect(dish)"
. So, when Choco-dish is clicked, the onSelect(dish: Dish)
method is called and passes the value of the Choco-dish that has been clicked in the menu.component.ts
.
<div class="media" *ngFor="let dish of dishes" (click) = "onSelect(dish)">
Modify the dishdetail
link using the Property binding [dish] = "selectedDish"
. With this property binding, the value- dish
is passed from the component to the specified property- selectDish
. Recall that the selectedDish is a variable in the menu.component.ts file.
<app-dishdetail [dish] = "selectedDish"></app-dishdetail>