Child Routes in Angular

It may be that a component that is already involved in routing also has child components. It is possible to make these child components also show up through routing.

For example, let's say we have a component Aaaa. We access it via the URL /aaaa/. Let's make two more child components: Chix and Chiy. We'll show them inside the view of the component Aaaa. Aaaa will have its own tag router-outlet, in which, depending on the URL, either one or the other child component will be shown.

So, let's implement what was described.

Let's create the first child component:

ng generate component chix

Let's create the second child component:

ng generate component chiy

Let's write separate child routes:

let childRoutes: Routes = [
	{ path: 'chix', component: ChixComponent },
	{ path: 'chiy', component: ChiyComponent },
];

Let's add them to the Aaaa component route as children:

const appRoutes: Routes = [
	{
		path: 'aaaa',
		component: AaaaComponent,
		children: childRoutes
	},
];

The path from the parent component's route will be the start of the child's path. This means that child components will be accessible via the following URLs: /aaaa/chix and /aaaa/chiy.

Let's now configure the Aaaa component. Let's import the routing tag:

import { RouterOutlet } from '@angular/router';

Let's write it in the decorator:

@Component({
	......
	imports: [RouterOutlet],
	......
})

Let's insert the tag into the view:

<p>it works</p>
<router-outlet></router-outlet>

Now you can access child components by their URLs and these components will be shown. Try it!

Implement the described work of child components.

Create links that will be used to switch child components.