0

As of this question How to group angular components with a root component like how the App-Component works , I have children being loaded into the main router-outlet, is there a way to have more than one child load at a time, and each being inserted into its own special outlet?

Like :

Parent View

<section class="main-parent">
      <router-outlet-child1></router-outlet-child1>
      <router-outlet-child2></router-outlet-child2>
</section>

and routing like :: 

{
    path: 'parent-path', component: ParentComponent, children: [
      { path: '', component: Child1Component }, //to first outlet
      { path: '', component: Child2Component }, //to 2nd outlet
    ]
},
Relm
  • 7,923
  • 18
  • 66
  • 113

1 Answers1

3

I believe you can use a named outlet:

<router-outlet name="child1"></router-outlet>
<router-outlet name="child2"></router-outlet>

...

{
    path: 'parent-path', component: ParentComponent, children: [
       { path: '', component: Child1Component, outlet: 'child1' }, //to first outlet
       { path: '', component: Child2Component, outlet: 'child2' }, //to 2nd outlet
    ]
}

https://angular.io/guide/router#displaying-multiple-routes-in-named-outlets

Rich
  • 137
  • 4
  • Ah looks like you beat me to it, I will remove my answer :) – Pete Apr 14 '18 at 13:14
  • Ohhh, angular has some strange nice things. I know this isn't part of the question, but can you add some performance comments on this if you know of any. – Relm Apr 14 '18 at 14:07
  • I'm not aware of any performance issues with regard to Angular and Routing (giving Angular the benefit of the doubt that they've exposed it for a reason). But if you're talking purely DOM performance, sure if you have a bunch of Components with a lot of DOM manipulations/change detection going on at the same time, but I doubt you'll reach that scale. Only other thing I can think of is maybe the initial load time being slower if the module is not lazy loaded, unless you're building a large scale app, I wouldn't worry about... – Rich Apr 14 '18 at 16:16