What is child routing ?
Whenever we want to change inside content of a page beside header footer. So there we need to create a nested router-outlet.
And with this we need to add children attribute in our routing file.
Use there children
–TS File (app-routing.module.ts)
import { NgModule } from "@angular/core"; import { Routes, RouterModule } from "@angular/router"; import { RecipesComponent } from "../recipes/recipes.component"; import { RecipeStartComponent } from "../recipes/recipe-start/recipe-start.component"; import { RecipeDetailComponent } from "../recipes/recipe-detail/recipe-detail.component"; import { RecipeEditComponent } from "../recipes/recipe-edit/recipe-edit.component"; const appRoutes: Routes = [ { path: '', redirectTo: '/recipes', pathMatch: 'full'}, { path: 'recipes', component: RecipesComponent, children: [ { path: '', component: RecipeStartComponent}, { path: 'new', component: RecipeEditComponent}, { path: ':id', component: RecipeDetailComponent}, { path: ':id/edit', component: RecipeEditComponent} ] }, ] @NgModule({ imports: [ RouterModule.forRoot(appRoutes) ], exports: [RouterModule] }) export class AppRoutingModule {}
You can see we have already router-outlet in app.component.html file.
But for child routing we need to add one more router-outlet into recipes.component.html file.
Add new router-outlet in recipes component
<router-outlet></router-outlet>