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

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

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.
 
     <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">
@@ -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.
 
     <code-example path="getting-started/src/app/product-details/product-details.component.1.ts" header="src/app/product-details/product-details.component.ts" region="get-product">
     </code-example>
 
-    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 `<div>` renders with a name, price, and description.