Angular: Multiple nested routes

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.

Solution

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.