Submodule 21.2: Single Page Applications - Practice

Updating Routes

Open the routes.ts and add the following route to it:

{ path: 'dishdetail/:id', component: DishdetailComponent }

The :id in the second route is a token for a route parameter. In a URL such as /discdetail/2, "2" is the value of the id parameter. The corresponding DishdetailComponent will use that value to find and present the dish whose id is 2. 

If you tell the router to navigate to the detail component and display "75% DARK CHOCOLATE", you expect a dish id to appear in the browser URL like this:

http://localhost:4200/dishdetail/2
If a user enters that URL into the browser address bar, the router should recognize the pattern and go to the same "75% DARK CHOCOLATE" detail view.