CODEWITHSUNDEEP
angularroutesrouteroutlet
elzoy
elzoy

Reputation: 5445

Two main router-outlets with different layouts

Layout for all users

Layout for personnel (like admin control panel)

I have one router-outlet which has first layout. At /personnel I'd like to use the second one. How to do that? I don't want to hide elements because personnel has also it's components like personnel/users etc.

I'd like to load personnel as independent component which is not inside main router-outlet. personnel should have it's own router-outlet.

Let's make it a bit more clear.

const appRoutes: Routes = [
  { // first layout (here is the first and for now the only one router-outlet
    path: '',
    children: [
      { path: '', component: SiteComponent, pathMatch: 'full' },
      { path: 'install', component: InstallationComponent, canActivate: [ InstallationAuth ] },
      { path: 'login', component: LoginComponent, canActivate: [ LoginAuth ] },
      { path: 'register', component: RegisterComponent },
      { path: 'reset', component: ResetComponent, canActivate: [ LoginAuth ] }
    ]
  },
  { //second layout (personnel should have it's own router-outlet
    path: 'personnel',
    children: [
      { path: '', component: PersonnelComponent, canActivate: [ PersonnelAuth ]},
      { path: 'users', component: UsersComponent, outlet: 'personnel' }
    ]
  }
];

Upvotes: 1

Views: 540

Answers (1)

Gevorg Narimanyan
Gevorg Narimanyan

Reputation: 296

You can move your rout hierarchy one step down, So in your root app component define single <router-outlet></router-outlet> without any layout, in one step down define your default empty route component with your main layout

<...LayoutMain>
 <router-outlet></router-outlet>
<...LayoutMain>`

in secon component define your personnel Layout whit /personnel root

  <...Layoutpersonnel >
     <router-outlet></router-outlet>
    <...Layoutpersonnel >`

Upvotes: 0

Related Questions