From 1e151f9fe4a001b07b1e6aa906b1a83d1ced65a0 Mon Sep 17 00:00:00 2001 From: George Kalpakas Date: Wed, 6 Jan 2021 23:05:46 +0200 Subject: [PATCH] docs: fix instructions for setting up `ProductDetailsComponent` in `start-routing.md` (#40197) PR #34934 switched the `getting-started` docs example from using the index of a product in the `products` array to using the product's ID property for indentifiying each product in the `ProductDetailsComponent` component. However, some necessary changes in the example code and the `start-routing.md` guide were missed in #34934, resulting in broken instructions for the readers (see #40189). This commit is essentially a follow-up to #34934, making the remaining changes in the example code and the guide instructions. Fixes #40189 PR Close #40197 --- .../examples/getting-started-v0/src/app/products.ts | 3 +++ aio/content/start/start-routing.md | 10 +++++----- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/aio/content/examples/getting-started-v0/src/app/products.ts b/aio/content/examples/getting-started-v0/src/app/products.ts index da94ebbdea..ebcde04caa 100644 --- a/aio/content/examples/getting-started-v0/src/app/products.ts +++ b/aio/content/examples/getting-started-v0/src/app/products.ts @@ -1,15 +1,18 @@ export const products = [ { + id: 1, name: 'Phone XL', price: 799, description: 'A large phone with one of the best screens' }, { + id: 2, name: 'Phone Mini', price: 699, description: 'A great phone with one of the best cameras' }, { + id: 3, name: 'Phone Standard', price: 299, description: '' diff --git a/aio/content/start/start-routing.md b/aio/content/start/start-routing.md index ccab95b67c..61cbb606c2 100644 --- a/aio/content/start/start-routing.md +++ b/aio/content/start/start-routing.md @@ -28,9 +28,6 @@ This section shows you how to define a route to show individual product details. 1. Open `product-list.component.html`. -1. Update the `*ngFor` directive to read as follows. - This statement instructs Angular to iterate over the items in the `products` array and assigns each index in the array to the `productId` variable when iterating over the list. - 1. Modify the product name anchor to include a `routerLink` with the `product.id` as a parameter. @@ -79,12 +76,15 @@ In this section, you'll use the Angular Router to combine the `products` data an By injecting `ActivatedRoute`, you are configuring the component to use a service. The [Managing Data](start/start-data "Try it: Managing Data") step covers services in more detail. -1. In the `ngOnInit()` method, subscribe to route parameters and fetch the product based on the `productId`. +1. In the `ngOnInit()` method, extract the `productId` from the route parameters and find the corresponding product in the `products` array. - The route parameters correspond to the path variables you define in the route. The URL that matches the route provides the `productId`. Angular uses the `productId` to display the details for each unique product. + The route parameters correspond to the path variables you define in the route. + To 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. + The URL that matches the route provides the `productId` . + Angular uses the `productId` to display the details for each unique product. 1. Update the `ProductDetailsComponent` template to display product details with an `*ngIf`. If a product exists, the `
` renders with a name, price, and description.