In this activity, you'll learn
- how to leverage the RouterLink directive to make the most use of Angular Router.
- how to get paremeters from the dynamic urls
From the command line at the root of the project:
ng serve 08-routing-recap
-
In
app.routes.ts
, define a route forHomeComponent
as the default route. -
Define routes for
DetailsComponent
, add a URL parameter to the path forDetailComponent
calledid
-/details/:id
-
In
app.component.ts
, add the<router-outlet />
to component template.
-
In
app.component.ts
, dynamically generate a list of links for products inproductTitles
.-
Generate a link and use the
routerLink
attribute. -
Use the index of the
productTitles
element
Hint, you can access
$index`` in the context of the
@for` @for documentation -
-
In,
details.component.ts
, create a property calledproductId
of typenumber
. -
In detail component define an
@Input
property calledid
and createsetter
function for it:@Input() set id(value: number) { this.productId = value; }
-
Update the
DetailsComponent
template to reference the product from the product list that at the indeces forproductId
. -
Save your changes.
-
Confirm that you can now route between products in the browser.