Submodule 21.2: Single Page Applications - Practice

 Open menu.component.html and update it as follows.

<div class="media" *ngFor="let dish of dishes" [routerLink]="['/dishdetail', dish.id]">

As you can see, we have replace the (click) = "onSelect(dish)" with the [routerLink]="['/dishdetail', dish.id. This link parameters array holds the information for router navigation. Every time that we click on a Choco-dish the router knowns to which element we are referring and provides the path to the destination component.

Also remove the <app-dishdetail> from the template because we no longer need it. Its job will be done from the router.

Open menu.component.ts and delete the selectDish variable and the onSelectDish method. Since we no longer use the (click) = "onSelect(dish)" method to select a dish,we no longer need the onSelect method.