Angular: How to use multiple router-outlets?

Question

I have a component like this

main page:

<div> 
 <a routerLink="alpha"> Alpha </a>
 <a routerLink="beta"> Beta </a>
</div>

<router-outlet></router-outlet>

<footer></footer>

beta template:

<div>
 <a routerLink="/actual">actual</a>
 <a routerLink="/archive">archive</a>
<div>
<router-outlet></router-outlet>

The possible scenario is: When you click BETA button on the home page, it brings up the router-outlet beta template in the home. but the router-outlet in the beta template is empty. when I click on the links in the beta template, it will bring the component.

When the BETA link on the home page is clicked, the router-outlet in the beta page does not come up empty and the actual incoming component is clicked.

Answer 1

For example, if you want some child route need to be activated when navigating to beta:

    const appRoutes: Routes = [
      { path: 'alpha', component: SomeComponentA},
      { path: 'beta',        
        component: SomeComponentB,
        children: [
           {
               path: 'actual',        
               component: SomeComponentBActual,
           },
           {
               path: 'archive',        
               component: SomeComponentBArchive,
           },
           // add
            {
               path: '',        
               redirectTo: 'actual', pathMatch: 'full',
           },
       ]           

  },         
   ];

So when you navigate to beta, it will redirect to it's child route. CODE EXAMPLE