CODEWITHSUNDEEP
angular
AKHIL NAMBIAR
AKHIL NAMBIAR

Reputation: 23

How to use ngIf for conditional routing

Admin route.ts with child

const AdminRoutes: Routes = [{
     path: '', component: AdminComponent, children: [
    { path: 'dashboard', component: DashboardComponent },
    { path: 'adduser', component: AdduserComponent }, { path: 'userlist', component: UserlistComponent }, { path: 'userdetails', component: UserdetailsComponent }, { path: 'appliedleaves', component: LeavesAppliedComponent },
    { path: '', redirectTo: 'dashboard', pathMatch:'full' }]
}]

app-routing.ts

const routes: Routes = [
  { path: 'register', component: RegisterComponent },
  { path: 'login', component: LoginComponent },
  { path: 'employee', loadChildren: './employee/employee.module#EmployeeModule', canActivate: [authguardModule] },
  { path: 'admin', loadChildren: './admin/admin.module#AdminModule', canActivate: [authguardModule] }
  
];

I have a admin module. It has 3 children: dashboard, userlist, leaves. I need to show userlist when I navigate to admin/userlist, similarly for all other. But it is showing userlist only whenever I navigate to dashboard or leaves.

How can I achieve this with *ngIf? Like:

<app-userdetails *ngIf="something here?"></app-userdetails>

Upvotes: 0

Views: 467

Answers (2)

Amey
Amey

Reputation: 815

use the following route for adminroute : 

const adminRoute : Routes = [

path : '',
component : adminRoute,
childrean :[
{route of leaves  }
]

]

Upvotes: 0

Mohamed Wahshey
Mohamed Wahshey

Reputation: 422

This scenario can be achieved in the router module, you will do the following in the routes array:

[
{ path: 'userlist', component: your userlist component classname, for ex: 
UserListComponent },
{ path: 'dashboard', component: your dashboard component classname },
{ path: 'leaves', component: your leaves component classname }
]

Upvotes: 1

Related Questions