Child Routes

We have an about page that we’re going to transform. We’ll add some dummy sections to it where visitors can view a short bio and learn about the team, and some past clients. We’ll take it a step further by putting each section into a child route.

What is a child route?

We can create a hierarchy out of our routes. In some cases, we’ll want routes to be children of other routes. For example, here’s what we’ll want the routes for the about page to look like.

• /about: display the bio
• /about/team: display the team
• /about/clients: Displays clients

We’ll create a component for each page. The components should only get rendered if they’re on the /about path.

Creating the components

We’ll quickly run through the process of creating the components. In the command line, run the following command for the bio section:

ng generate component about/bio

For the team section:

ng generate component about/team

For the clients section:

ng generate component about/clients:

Defining child routes

One solution for creating child routes is to add them to the app routing module.