CODEWITHSUNDEEP
angularrouter-outlet
ktsangop
ktsangop

Reputation: 1173

Angular multiple router outlets without auxiliary routes

Is there any way we can use mulitple <router-outlet> entries on an angular component, and load different components/modules, based on route?

I have managed to do this using the Outlet Context, and Template Variable references, but this introduces a lot of complexity for handling Auxiliary Routes.

My main goal is to load a different header component/module (preferable lazy loaded) based on which route the user is, in the same way the primary <router-outlet> works.

The following example does not work. Is there any other way to achieve this?

app.component.html 

<div class="application-wrapper">
  <header>
    <router-outlet name="header"></router-outlet>
  </header>
  
  <main>
    <router-outlet></router-outlet>
  </main>

  <footer>...</footer>
</div>

app-routing.module.ts

//...
const routes: Routes = [
  {path: '', pathMatch: 'full', redirectTo: 'intro'},
  {
    path: 'intro',
    component: IntroComponent
  },
  {
    path: 'intro',
    component: HeaderOneComponent,
    outlet: 'header'
  },
  {
    path: 'main',
    component: MainComponent
  },
  {
    path: 'main',
    component: HeaderTwoComponent,
    outlet: 'header'
  },
];
//...

Upvotes: 1

Views: 2205

Answers (1)

Ludovic Cyril Michel
Ludovic Cyril Michel

Reputation: 190

I had the same issue and I think I figured it out. You would do:

//...
const routes: Routes = [
  //...
  {
    path: 'intro',
    children: [
      {
        path: '',
        component: IntroComponent,
      },
      {
        path: '',
        component: HeaderOneComponent,
        outlet: 'header'
      }
    ]
  },
  {
    path: 'main',
    children: [
      {
        path: '',
        component: MainComponent
      },
      {
        path: '',
        component: HeaderTwoComponent,
        outlet: 'header'
      }
    ]
  }
];
//...

Upvotes: 5

Related Questions