CODEWITHSUNDEEP
javascriptangulartypescriptangular2-routingangular6
Munerz
Munerz

Reputation: 1182

Angular 6 Aux Routing

So the idea is that I'm navigating to an admin page, & then want to load various components within that page using a side nav only on that page.

So I'm pretty sure an aux route is the best case for this, tell me if I'm wrong.

  { path: 'userAccounts', component: UserManagementComponent, canActivate: [LoggedInGuard]},
  { path: 'admin', component: AccountCreationPageComponent, outlet:'admin' },

<div class="navigation_items" *ngFor="let x of data" 
 [routerLink]="[ { outlets: { 'admin':['admin']}}]">{{x.id}}</div>
    <router-outlet name="admin"></router-outlet>

Basically I'm assuming my syntax is wrong somewhere, or I haven't quite understood how Aux routes work, as this wont display the admin path

Any help would be appreciated.

Upvotes: 1

Views: 472

Answers (1)

Munerz
Munerz

Reputation: 1182

It would appear that the child route had to be nested within the parent route so 

  {
    path: 'userAccounts', component: UserManagementComponent, canActivate: [LoggedInGuard], children: [
      { path: 'admin', component: AccountCreationPageComponent, outlet: 'admin' }
    ]
  }

Did the trick.

Upvotes: 1

Related Questions