Skip to content

Files

Latest commit

a170581 · Dec 5, 2023

History

History

08-routing-recap

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
Dec 5, 2023
Dec 5, 2023
Dec 5, 2023

08-routing-recap

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

Run this example

From the command line at the root of the project:

ng serve 08-routing-recap

Instructions

Define Routes & add <router-outlet />

  1. In app.routes.ts, define a route for HomeComponent as the default route.

  2. Define routes for DetailsComponent, add a URL parameter to the path for DetailComponent called id -

    /details/:id
    
  3. In app.component.ts, add the <router-outlet /> to component template.

Update components

  1. In app.component.ts, dynamically generate a list of links for products in productTitles.

    • 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

  2. In, details.component.ts, create a property called productId of type number.

  3. In detail component define an @Input property called id and create setter function for it:

    @Input() set id(value: number) {
        this.productId = value;
    }
  4. Update the DetailsComponent template to reference the product from the product list that at the indeces for productId.

  5. Save your changes.

  6. Confirm that you can now route between products in the browser.