Angular 9/8 Nested Routing and Child Routes by Example

Angular 9/8 Nested Routing and Child Routes by Example

In this post we will give you information about Angular 9/8 Nested Routing and Child Routes by Example. Hear we will give you detail about Angular 9/8 Nested Routing and Child Routes by ExampleAnd how to use it also give you demo for it if it is necessary.

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 Angular routing to our module using a routing module, a nested router-outlet and child routes.

How to Create Nested Routes with Angular 9 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.

Creating an Angular 9 Routing Module

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';constroutes: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]})exportclassAdminRoutingModule{}

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’s RouterModule.forChild(routes),
  • The exports array which contains what we need to export.

Adding Child Routes to the Angular 9 Router Module

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]})exportclassAdminModule{}

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:

<liclass="nav-item"><aclass="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:

Angular nested routing

Check out all parts:

  • Angular 9/8 Tutorial Course: CLI, Components, Routing & Bootstrap 4,
  • Angular 9/8 Tutorial Course: Angular NgModules (Feature and Root Modules),
  • Angular 9/8 Tutorial Course: Nested Router-Outlet, Child Routes & forChild()
  • Angular 9/8 Tutorial Course: Authentication with Firebase (Email & Password),
  • Angular 9/8 Tutorial Course: Securing the UI with Router Guards and UrlTree Parsed Routes

Conclusion

In this tutorial, you have created nested routing in your Angular 9 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.


Hope this code and post will helped you for implement Angular 9/8 Nested Routing and Child Routes by Example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US