How to manage multilevel navigation/Routing in Angualar 2, Angualar 4, Angular 5

How to manage multilevel navigation in Angualar 2, Angualar 4, Angular 5

In user-routing.module.ts file

const appRoutes: Routes = [
{
path: 'user',
component: UserComponent,
canActivate: [AuthGuardService],
children: [
{ 
path: 'nav1',
children: [
{ path: 'subNav', component: SubNavComponent }
]
}
]
}
]

 

Above AuthGuardService call auth-gaurd.service.ts to validate user login

I have created navbar common component for navigation
navbar.component.html

<div class="navbar-container"> 
<div class="row"> 
<div class="nav-buttons">
<ul class="nav">
<li routerLink="../user/nav1/subNav" routerLinkActive="active">My Link</li> 
</ul>
</div> 
</div>
</div>

 

Based on folder dept you can assign ../ ahead of routerLink path.