Routes
::id
in the path of the product-details
route, which places the parameter in the path. For example, to see the product details page for product with ID 5, you must use the following URL: localhost:3000/product-details/5
ProductList
component you could display a list of products. Each product would have a link to the product-details
route, passing the ID of the product:routerLink
directive passes an array which specifies the path and the route parameter. Alternatively we could navigate to the route programmatically:ProductDetails
component must read the parameter, then load the product based on the ID given in the parameter.ActivatedRoute
service provides a params
Observable which we can subscribe to to get the route parameters (see Observables).The reason that theparams
property onActivatedRoute
is an Observable is that the router may not recreate the component when navigating to the same component. In this case the parameter may change without the component being recreated.