Child Routing In Angular Application
Published: 2023-08-08 10:55:23

In this article, I will create a demo explaining all about **child routing in Angular application.** In Angular application, We need to set the routing and corresponding component to navigate the user through the application because Angular is a single page application and the page never loads in it.

Here I will explain how we can make the routing in angular application in a perfect way, We will see here children routing. When some routes may only be accessible and viewed within the other routes it may be appropriate to create them as child routes. 
For example, The product details page may have a navigation section that shows the product details by default. When the user clicks the "Technical Specs" tab the section shows the specs instead.

If the user clicks on the product with ID 10, we want to show the product details page with the detail:

**localhost:3000/product-details/10/detail**

When clicking over Technical specs:

**localhost:3000/product-details/10/specs**

So for achieving the requirement like above, we need child routing or subroutine in angular application. 

### Let's Get Started

### Step 1: Create angular app

Create an angular app using angular CLI command like below:

``````ng new angular-child-routing``````

When we run this command it asks us for routing options, We have to enter yes like below:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/culbsanncv2y1szoe8ex.png)


### Step 2: Create header component

Create a header component with below command:

``````ng g c header --spec=false``````

After running above command, We will add some html content for showing navigation over the header. So open the header.component.html file and put below code in it:

``````<nav class="navbar navbar-expand-sm bg-light">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">User</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>``````

For simplicity I have added the cdn url of bootstrap css in index.html file under src folder. You can do it after installing NPM package, which is prefered way.


### Step 2: Create Home Component

Now, Create home component using below command:

``````ng g c home --spec=false``````

After creating component we also need to add this component in the routing file. So open the **app-routing.module.ts** file and put the below code:

``````import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
 
import { HomeComponent } from './home/home.component';
 
const routes: Routes = [{
path: 'home',
component: HomeComponent
}];
 
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }``````


### Step 3: Update app.component.html

Open app.component.html file, and put below code in it:

``````<div>
 
<app-header></app-header>
<div class="container">
<router-outlet></router-outlet>
</div>
 
</div>``````


### Step 4: Update header.component.html

Open the header.component.html file and put below code to set the path in routerLink.

``````<nav class="navbar navbar-expand-sm bg-light">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" routerLink="/home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="user/list">User</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="user/announcements">User Announcements</a>
</li>
</ul>
</nav>``````

### Step 5: Create User module and its components
Let's create a new user module with below command:

``````ng g module user``````

Above command will create folder inside app folder named user, and a file user.module.ts. Now create components of user module.

Create it with  below command:

``````ng g c user/user --spec=false
ng g c user/user-list --spec=false
ng g c user/user-announcements --spec=false``````

After it, Add user module in **app.module.ts.**  So import user module in app.module.ts file and add in imports under @ngModule like below:

``````imports: [ BrowserModule, AppRoutingModule, UserModule ],``````


### Step 6: Create a routing file for the user module.

Create a file named user-routing.module.ts file inside and put below code inside it.

``````import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
 
import { UserComponent } from './user/user.component';
import { UserListComponent } from './user-list/user-list.component';
import { UserAnnouncementsComponent } from './user-announcements/user-announcements.component';
 
const routes: Routes = [
{
path: 'user',
component: UserComponent,
children: [
{
path: 'list',
component: UserListComponent
},
{
path: 'announcements',
component: UserAnnouncementsComponent
}
]
}
];
 
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class UserRoutingModule { }``````

After doing above task, We need to add this routing file in user.module.ts file like below:

``````import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
 
import { UserRoutingModule } from './user-routing.module';
 
import { UserComponent } from './user/user.component';
import { UserListComponent } from './user-list/user-list.component';
import { UserAnnouncementsComponent } from './user-announcements/user-announcements.component';
 
@NgModule({
declarations: [UserComponent, UserListComponent, UserAnnouncementsComponent],
imports: [
CommonModule,
UserRoutingModule
]
})
export class UserModule { }``````

We are done with all the steps need to create the app.


### Step 7: Run the app

Run the app with npm start and check the app over browser with url http://localhost:4200. Page will open like below when we navigate to user list:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6v489n1xfn1797i54sz8.png)


### Conclusion

So in this demo, We learn to organize angular in module-wise with child routing, This makes our app modular. You can find other demos of [Angular sample Application](https://jsonworld.com/demo/child-routing-in-angular-application)

That’s all for now. Thank you for reading and I hope this demo will be very helpful to create Angular module-wise and set child routing to make the code clean.

Let me know your thoughts over the email **demo.jsonworld@gmail.com.** I would love to hear them and If you like this article, share it with your friends.

Thanks!

This article is originally posted over [jsonworld](jsonworld.com)