:idin the path of the
product-detailsroute, 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:
ProductListcomponent you could display a list of products. Each product would have a link to the
product-detailsroute, passing the ID of the product:
routerLinkdirective passes an array which specifies the path and the route parameter. Alternatively we could navigate to the route programmatically:
ProductDetailscomponent must read the parameter, then load the product based on the ID given in the parameter.
The reason that the
ActivatedRouteis 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.