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 @@

Products

-
+

- + {{ product.name }}

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.