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

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
   }

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
   }

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>

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: ''

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>