From 362f45c4bf1bb49a90b014d2053f4c4474d132c0 Mon Sep 17 00:00:00 2001
From: Troels Lenda <troelslenda@gmail.com>
Date: Thu, 23 Jan 2020 21:29:15 +0100
Subject: [PATCH] docs: use an explicit product id in the getting started
 example (#34934)

Simplyfing the example by prodiving an id for each
product instead of relying on their index in the array.

Closes #34738

PR Close #34934
---
 .../src/app/product-details/product-details.component.1.ts | 7 +++++--
 .../src/app/product-details/product-details.component.ts   | 7 +++++--
 .../src/app/product-list/product-list.component.html       | 4 ++--
 aio/content/examples/getting-started/src/app/products.ts   | 3 +++
 aio/content/start/start-routing.md                         | 2 +-
 5 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/aio/content/examples/getting-started/src/app/product-details/product-details.component.1.ts b/aio/content/examples/getting-started/src/app/product-details/product-details.component.1.ts
index 78add76808076..413ad547e5bd0 100644
--- a/aio/content/examples/getting-started/src/app/product-details/product-details.component.1.ts
+++ b/aio/content/examples/getting-started/src/app/product-details/product-details.component.1.ts
@@ -23,8 +23,11 @@ export class ProductDetailsComponent implements OnInit {
   // #enddocregion props-methods
   // #docregion get-product
   ngOnInit() {
-    this.route.paramMap.subscribe(params => {
-      this.product = products[+params.get('productId')];
+    // First get the product id from the current route.
+    const productIdFromRoute = this.route.snapshot.paramMap.get('productId');
+    // Find the product that correspond with the id provided in route.
+    this.product = products.find(product => {
+      return product.id === Number(productIdFromRoute);
     });
   // #docregion product-prop
   }
diff --git a/aio/content/examples/getting-started/src/app/product-details/product-details.component.ts b/aio/content/examples/getting-started/src/app/product-details/product-details.component.ts
index f3731e7e65b4a..8460b7cb9bbcd 100644
--- a/aio/content/examples/getting-started/src/app/product-details/product-details.component.ts
+++ b/aio/content/examples/getting-started/src/app/product-details/product-details.component.ts
@@ -30,8 +30,11 @@ export class ProductDetailsComponent implements OnInit {
 // #docregion get-product
   ngOnInit() {
 // #enddocregion props-methods
-    this.route.paramMap.subscribe(params => {
-      this.product = products[+params.get('productId')];
+    // First get the product id from the current route.
+    const productIdFromRoute = this.route.snapshot.paramMap.get('productId');
+    // Find the product that correspond with the id provided in route.
+    this.product = products.find(product => {
+      return product.id === Number(productIdFromRoute);
     });
 // #docregion props-methods
   }
diff --git a/aio/content/examples/getting-started/src/app/product-list/product-list.component.html b/aio/content/examples/getting-started/src/app/product-list/product-list.component.html
index f1b86df848c2b..3bff6c54fc26a 100644
--- a/aio/content/examples/getting-started/src/app/product-list/product-list.component.html
+++ b/aio/content/examples/getting-started/src/app/product-list/product-list.component.html
@@ -1,10 +1,10 @@
 <h2>Products</h2>
 
 <!-- #docregion router-link -->
-<div *ngFor="let product of products; index as productId">
+<div *ngFor="let product of products">
 
   <h3>
-    <a [title]="product.name + ' details'" [routerLink]="['/products', productId]">
+    <a [title]="product.name + ' details'" [routerLink]="['/products', product.id]">
       {{ product.name }}
     </a>
   </h3>
diff --git a/aio/content/examples/getting-started/src/app/products.ts b/aio/content/examples/getting-started/src/app/products.ts
index da94ebbdea0d4..ebcde04caaa5f 100644
--- a/aio/content/examples/getting-started/src/app/products.ts
+++ b/aio/content/examples/getting-started/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 17a11f4a90eee..ccab95b67c6c5 100644
--- a/aio/content/start/start-routing.md
+++ b/aio/content/start/start-routing.md
@@ -31,7 +31,7 @@ This section shows you how to define a route to show individual product details.
 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`.
+1. Modify the product name anchor to include a `routerLink` with the `product.id` as a parameter.
 
     <code-example header="src/app/product-list/product-list.component.html" path="getting-started/src/app/product-list/product-list.component.html" region="router-link">
     </code-example>