Child Routes in Angular: Organizing Your Application with Nested Routes

Hi, today I’d like to talk about child routes in Angular.

As your application grows, you may want to create routes that are children of a specific component. This feature, known as nested routes, allows you to organize your app more efficiently.

In the example below, we have an application with a main route /products, which shows a product listing with an option for details, where the additional information of the selected item will be displayed.

In the routing module, I configured the path ‘products’ with the component responsible for listing the items. Then, I added the children property with the path :id (codigo), pointing to the component that will display the details.

After this setup, we need to add the <router-outlet></router-outlet> in the HTML of our product listing page, as shown in the image below.

This way, whenever we click on a product, it will display the detail component in the second column of the page.

Well, I think that’s all for now. You can check out the full application code on GitHub.