Rendering the ProductDetails Component

Let’s render our ProductDetails component in the item route. The item route is a nested and dynamic route. The item route is loaded when a user clicks on a product. We need to create an index route for our category route to achieve this. We’ll render all our product listing of the category route from the index route. The {{outlet}} in the product.hbs template loads the index and item routes.

Creating the index route

We need to add the index route in the category route. We can do this by adding the index.hbs template inside app/templates/category:

ember g route category/index

The command above creates an index.hbs file inside app/templates/category. Let’s open and shift all our category.hbs code to category/index.hbs and link the products to the item route: