Submodule 20.2: Data Binding - Practice

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>