Child routes in Angular Js 4

Posted By : Shilpa Adlakha | 29-Sep-2017

angularjs

Child routes in Angular 4 :

The route can have a number of child routes of their components.A route is an array of Route. Route has various types of properties to maintain route for example path , component , outlet , children. To specify child route for a parent route, we use children property. The component speific to a child route will lie in the router outlet of the component which is related to the parent route of that child route. In the given example we have created a home as parent route and about as children routes,Import the required component to be routed. Write the following line of code in the routing file.


import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutComponent } from './home.component';
import { HomeComponent } from './about.component';
import { AboutUserComponent } from './about-user.component';
import { AboutSectionComponent } from './about-section.component';
const homeRoutes: Routes = [
{
path: 'home',
component: HomeComponent,
children: [
{
path: '',
component: HomeComponentn
},
{
path: ':username',
component: AboutUserComponent
}
]
}
];

export const homeRouting: ModuleWithProviders = RouterModule.forChild(homeRoutes);

We have created the constant home routes, which is a array of component along with their path. this constant is passed in the child router module.

Thanks