> For the complete documentation index, see [llms.txt](https://koziuk-s.gitbook.io/angular-starter/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://koziuk-s.gitbook.io/angular-starter/routing/child-routing.md).

# Child Routing

Child Routing нам потрібен у випадку якщо ми здійснюємо навігацю на  вкладеному рівні. Наприклад `/routing/child-routing`. Тобто ми переходимо на певну сторінку і в межає цієї сторінки здійснюємо додаткову навігацію. 

Розглянемо **app-routing.module.ts**

{% code title="app-routing.module.ts" overflow="wrap" lineNumbers="true" %}

```typescript
// ....
import { TodosComponent } from './pages/todos/todos.component';
import { AboutComponent } from './pages/about/about.component';
import {
  PageNotFoundComponent
} from './pages/page-not-found/page-not-found.component';

const routes: Routes = [
  { path: '', redirectTo: 'todos', pathMatch: 'full' },
  { path: 'todos', component: TodosComponent },
  { path: 'about', component: AboutComponent,
    children: [
      { path: '', redirectTo: 'about-project', pathMatch: 'full', },
      { path: 'about-project', component: AboutProjectComponent },
      { path: 'about-us', component: AboutUsComponent },
      { path: 'about-us/:userId', component: UserComponent }
    ]
  },
  { path: '**', component: PageNotFoundComponent }
];
// ....
```

{% endcode %}

Тут доданий новий маршрут `{ path: 'about-us/:userId', component: UserComponent }`. 

Токен `:userId` представляє параметр маршруту. Тобто ми зможемо звернутися до компонента із запитом типу `/about-us/6`, і число **6** представлятиме параметр **userId**.

Після того як ми створили Child Routs, для їхнього відображення в батьківському компоненті теж потрібно використовувати директиву `<router-outlet></router-outlet>`.

{% code title="about.component.html" overflow="wrap" lineNumbers="true" %}

```markup
<router-outlet></router-outlet>
```

{% endcode %}

## Завдання

* Створити сторінки **about-project**, **about-us** та **user**.

{% code title="cmd" %}

```bash
ng g c pages/about/about-project
```

{% endcode %}

{% code title="cmd" %}

```bash
ng g c pages/about/about-us
```

{% endcode %}

{% code title="cmd" %}

```bash
ng g c pages/about/user
```

{% endcode %}

* В компоненту **about** додати навігацію.