{ "id": "start/start-routing", "title": "Adding navigation", "contents": "\n\n\n
\n mode_edit\n
\n\n\n
\n

Adding navigationlink

\n

This guide builds on the first step of the Getting Started tutorial, Get started with a basic Angular app.

\n

At this stage of development, the online store application has a basic product catalog.

\n

In the following sections, you'll add the following features to the application:

\n\n\n

Associate a URL path with a componentlink

\n

The application already uses the Angular Router to navigate to the ProductListComponent.\nThis section shows you how to define a route to show individual product details.

\n
    \n
  1. \n

    Generate a new component for product details.\nIn the file list, right-click the app folder, choose Angular Generator and Component.\nName the component product-details.

    \n
    2. \n
  2. \n

    In app.module.ts, add a route for product details, with a path of products/:productId and ProductDetailsComponent for the component.

    \n\n\n@NgModule({\n imports: [\n BrowserModule,\n ReactiveFormsModule,\n RouterModule.forRoot([\n { path: '', component: ProductListComponent },\n { path: 'products/:productId', component: ProductDetailsComponent },\n ])\n ],\n\n\n
    3. \n
  3. \n

    Open product-list.component.html.

    \n
    4. \n
  4. \n

    Modify the product name anchor to include a routerLink with the product.id as a parameter.

    \n\n<div *ngFor=\"let product of products\">\n\n <h3>\n <a [title]=\"product.name + ' details'\" [routerLink]=\"['/products', product.id]\">\n {{ product.name }}\n </a>\n </h3>\n\n<!-- . . . -->\n\n</div>\n\n\n

    The RouterLink directive helps you customize the anchor element.\nIn this case, the route, or URL, contains one fixed segment, /products.\nThe final segment is variable, inserting the id property of the current product.\nFor example, the URL for a product with an id of 1 would be similar to https://getting-started-myfork.stackblitz.io/products/1.

    \n
    5. \n
  5. \n

    Verify that the router works as intended by clicking the product name.\nThe application should display the ProductDetailsComponent, which currently says \"product-details works!\"

    \n

    Notice that the URL in the preview window changes.\nThe final segment is products/# where # is the number of the route you clicked.

    \n
    \n \"Product\n
    \n
    6. \n
\n

View product detailslink

\n

The ProductDetailsComponent handles the display of each product.\nThe Angular Router displays components based on the browser's URL and your defined routes.

\n

In this section, you'll use the Angular Router to combine the products data and route information to display the specific details for each product.

\n
    \n
  1. \n

    In product-details.component.ts, import ActivatedRoute from @angular/router, and the products array from ../products.

    \n\nimport { Component, OnInit } from '@angular/core';\nimport { ActivatedRoute } from '@angular/router';\n\nimport { products } from '../products';\n\n\n
    2. \n
  2. \n

    Define the product property.

    \n\nexport class ProductDetailsComponent implements OnInit {\n product;\n /* ... */\n}\n\n\n\n
    3. \n
  3. \n

    Inject ActivatedRoute into the constructor() by adding private route: ActivatedRoute as an argument within the constructor's parentheses.

    \n\nexport class ProductDetailsComponent implements OnInit {\n product;\n\n constructor(\n private route: ActivatedRoute,\n ) { }\n\n}\n\n\n\n

    ActivatedRoute is specific to each component that the Angular Router loads.\nActivatedRoute contains information about the route and the route's parameters.

    \n

    By injecting ActivatedRoute, you are configuring the component to use a service.\nThe Managing Data step covers services in more detail.

    \n
    4. \n
  4. \n

    In the ngOnInit() method, extract the productId from the route parameters and find the corresponding product in the products array.

    \n\nngOnInit() {\n // First get the product id from the current route.\n const routeParams = this.route.snapshot.paramMap;\n const productIdFromRoute = Number(routeParams.get('productId'));\n\n // Find the product that correspond with the id provided in route.\n this.product = products.find(product => product.id === productIdFromRoute);\n}\n\n\n

    The route parameters correspond to the path variables you define in the route.\nTo access the route parameters, we use route.snapshot, which is the ActivatedRouteSnapshot that contains information about the active route at that particular moment in time.\nThe URL that matches the route provides the productId .\nAngular uses the productId to display the details for each unique product.

    \n
    5. \n
  5. \n

    Update the ProductDetailsComponent template to display product details with an *ngIf.\nIf a product exists, the <div> renders with a name, price, and description.

    \n\n<h2>Product Details</h2>\n\n<div *ngIf=\"product\">\n <h3>{{ product.name }}</h3>\n <h4>{{ product.price | currency }}</h4>\n <p>{{ product.description }}</p>\n\n</div>\n\n\n\n

    The line, <h4>{{ product.price | currency }}</h4>, uses the currency pipe to transform product.price from a number to a currency string.\nA pipe is a way you can transform data in your HTML template.\nFor more information about Angular pipes, see Pipes.

    \n
    6. \n
\n

When users click on a name in the product list, the router navigates them to the distinct URL for the product, shows the ProductDetailsComponent, and displays the product details.

\n
\n \"Product\n
\n

For more information about the Angular Router, see Routing & Navigation.

\n

What's nextlink

\n

You have configured your application so you can view product details, each with a distinct URL.

\n

To continue exploring Angular:

\n\n\n \n
\n\n\n" }