Angular: Multiple nested routes

Question

Summary

• I have a list of products situated on a product page (url.com/products)
• When I click on a product i'm presented with a summary and a link to issues with that product (url.com/products/22) - (22 being the product id)
• When i click on the link to view issues, I become stuck.

What I have so far

I can display the list of products fine, and I can also display a page once clicking on a product and the URL changes to "url.com/products/10". So that's working fine with the below.

<a [routerLink] = "['/product', product.productID]">
  {{ product.productName }} 
</a>

Question Is it possible to use router links to achieve the following?

"url.com/products/10/issues/24"

• Products: The products page which displays a list of products
• 10: The selected product which has an ID of 10
• Issues: A issues list page related to that product
• 24:The selected issue which has an ID of 24

Any help would be greatly appreciated. Thank you.

Answer 1

Yes you can do that in the following way:

• For list of issues: [routerLink] = "['/product', product.productID, 'issues']".
  This will generate a link to /product/10/issues/

• For a particular issue: [routerLink] = "['/product', product.productID, 'issues', issueID]".
  This will generate a link to /product/10/issues/24

You can get more details over here.