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
More From Oodles
Ready to innovate? Let's get in touch
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Shilpa Adlakha
Shilpa is a bright Wordpress Developer, she has good knowledge of HTML, CSS, PHP and Wordpress.