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:

terminalng generate component chix

Let's create the second child component:

terminalng generate component chiy

Let's write separate child routes:

app/app.component.tslet childRoutes: Routes = [
  { path: 'chix', component: ChixComponent },
  { path: 'chiy', component: ChiyComponent },
];

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

app/app.component.tsconst 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:

app/aaaa/aaaa.component.tsimport { RouterOutlet } from '@angular/router';

Let's write it in the decorator:

app/aaaa/aaaa.component.ts@Component({
  ......
  imports: [RouterOutlet],
  ......
})

Let's insert the tag into the view:

app/aaaa/aaaa.component.html<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!