Reusing Components Using Child Routes

We used the paramMap property to get route parameters as an observable. So, ideally, our component could be notified of new values during its lifetime. But the component is destroyed each time we want to select a different product from the list, and so is the subscription to the paramMap observable. So, what’s the point of using it after all?

The router can reuse the instance of a component as long as it remains rendered on the screen during consecutive navigations. We can achieve this behavior using child routes, as we will learn in this lesson.

How to use child routes?

Using child routes is a perfect solution when we want to have a landing page component that will provide routing to other components in a feature module. It should contain a <router-outlet> element in which child routes will be loaded. Suppose that we want to define the layout of our Angular application as follows: