Angular 7|6 Tutorial Course: Nested Router-Outlet, Child Routes & forChild()
In the previous tutorial , you have seen what NgModules are and you created the admin
module of your developer's portfolio web application. Now, let's add routing to our module using a routing module, a nested router-outlet and child routes.
You can create a nested routing by defining child routes using the children property of a route (alongside a path
and component
properties). You also need to add a nested router-outlet
in the HTML template related to the component linked to the parent route (In our case it's the admin
route).
To create nested routing, you need to create a routing submodule for the module you want to provide routing, you next need to define a parent route and its child routes and provide them to the router configuration via a forChild()
method.
Let's see this step by step. First, inside the admin
module, create an admin-routing.module.ts
file and add a submodule for implementing child routing in our admin
module:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ProjectComponent } from './project/project.component';
import { ProjectListComponent } from './project-list/project-list.component';
import { ProjectCreateComponent } from './project-create/project-create.component';
import { ProjectUpdateComponent } from './project-update/project-update.component';
const routes: Routes = [
{
path: 'admin',
component: ProjectComponent,
children: [
{
path: 'list',
component: ProjectListComponent
},
{
path: 'create',
component: ProjectCreateComponent
},
{
path: 'update',
component: ProjectUpdateComponent
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class AdminRoutingModule { }
This is an example of a module which has imports
and exports
meta information;
- The
imports
array which contains the modules that we need to import and use in the current module. In this case it'sRouterModule.forChild(routes)
, - The
exports
array which contains what we need to export.
In order to provide our child routes to the router module, we use the forChild()
method of the module because we want to add routing in the admin
submodule. if this is used in root module you need to use the forRoot()
method instead. See more differences of forChild()
vs forRoot()
from the official docs.
The forChild()
and forRoot()
methods are static methods that are used to configure modules in Angular. They are not specific to RouterModule
.
We are creating a parent admin
route and its own child routes using the children
property of the route which takes an array of routes.
You can respectively access the ProjectListComponent
, ProjectCreateComponent
and ProjectCreateComponent
using the /admin/list
, /admin/create
and /admin/update
paths.
Next, open the src/app/admin/admin.module ts
file and import the routing module:
// [..]
import { AdminRoutingModule } from './admin-routing.module';
@NgModule({
// [...]
imports: [
CommonModule,
AdminRoutingModule
]
})
export class AdminModule { }
Next open the src/app/admin/project/project.component html
file and add a nested router outlet:
<h2>Admin Interface</h2>
<router-outlet></router-outlet>
This is a nested router-outlet that will be only used to render the components of the admin
module i.e ProjectListComponent
, ProjectCreateComponent
and ProjectCreateComponent
.
Note: If you don't add a nested router outlet in the parent route, child components will be rendered in the parent router outlet of the application.
Next in the src/app/header/header.component.html
file, add a link to access the admin interface:
<li class="nav-item">
<a class="nav-link" routerLink="/admin/list">Admin</a>
</li>
At this point, if you click on the admin link in the header, you should see the following interface:
Check out all parts:
- Angular 7|6 Tutorial Course: CLI, Components, Routing & Bootstrap 4,
- Angular 7|6 Tutorial Course: Angular NgModules (Feature and Root Modules),
- Angular 7|6 Tutorial Course: Nested Router-Outlet, Child Routes & forChild()
- Angular 7|6 Tutorial Course: Authentication with Firebase (Email & Password),
- Angular 7|6 Tutorial Course: Securing the UI with Router Guards and UrlTree Parsed Routes
Conclusion
In this tutorial, you have created nested routing in your Angular 7 application by creating a routing submodule for the admin module and adding a nested router-outlet and child routes for the /admin
parent route.
In the next tutorial, you'll secure the admin interface using Firebase authentication with email and password.
Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.
You can reach the author via Twitter:
Follow @ahmedbouchefraAbout the author


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.
Online Courses (Affiliate)
If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)
![]()
Angular Crash Course for Busy Developers
![]()
Read our other tutorials
- Angular Tutorial
- Laravel 6 Tutorial
- React Tutorial
- React Hooks Tutorial
- React Native Tutorial
- Webpack Tutorial
- PHP Tutorial
- JavaScript Tutorial
- Django Tutorial
- Java Spring Tutorial
- Rails 6 Tutorial
- Ionic 4 Tutorial
- TypeScript Tutorial
- Bootstrap 4 Tutorial
- Electron Tutorial
- Cordova Tutorial
- HTML Tutorial
- GraphQL Tutorial
- CSS Grid Layout Tutorial
- PWA Tutorial
