Child routes in Angular Js 4

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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

<span style="font-size:16px;"><span style="font-family:arial,helvetica,sans-serif;"> 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);   </span></span>

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

Read more at - http://www.oodlestechnologies.com/blogs/Child-routes-in-Angular-Js-4