how can I implement multi level routing?

Question

Hello, I want to implement multi level routing in angular with same component. example : /pages/:lev1/:lev2/:lev3/:lev4/:lev5/:lev6..... and so on. there is no limit to add childs.... Please help me out in this.

Mageshwaran R · Answer

Angular router considers a route with children as a non-terminal route and routing happens to terminal routes only. Angular router expects route to have a default entry for path: ''. To resolve this issue you should add a redirect from the parent route to one of the child routes. export const AdminRoutes: RouterConfig = [ { path: 'admin', component: AdminComponent, children: [ { path: '', redirectTo: 'main-page', terminal: 'true' }, { path: 'main-page', component: MainPageComponent, { path: 'settings', component: SettingsComponent }, ] }];

Satish · Answer

This will not help and also not a multi nesting routes. My question related to N number of nesting routes.

Kiran Mohanty · Answer

const routes: Routes = [ { path: "search" , component: SearchComponent }, { path: "artist/:artistId" , component: ArtistComponent, children: [ { path: "" , redirectTo: "tracks" , pathMatch: "full" }, { path: "albums" , component: ArtistAlbumListComponent children: [ { path: "tracks" , component: ArtistTrackListComponent } ] } ] } ]; Though i have never tried such nesting but i guess we can define like below.

how can I implement multi level routing?

Answers (3)