CODEWITHSUNDEEP
angularangular5angular-routing
cucuru
cucuru

Reputation: 3698

two router-outlet linked to different routing files

I'm trying to include a "particular" router-outlet in a component.

this is app.component.html:

<div fxFlexFill fxLayout="column">
   <header fxFlex="40px">
       <router-outlet name="header"></router-outlet>
   </header>
  <router-outlet></router-outlet>
</div>

each one is for one different routing file, first one go to header.routing.ts and the second one to app.routing.ts.

Is it possible to do? How can I link any router with its file?

Upvotes: 0

Views: 63

Answers (1)

samar taj Shaikh
samar taj Shaikh

Reputation: 1185

yes it is possible,you can use, outlet feature provided by angular, below is a pseudo example

<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
 <div class="container-fluid">
   <div class="row d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3">
     <div class="col-12">
       <router-outlet name="left"></router-outlet>
     </div>
   </div>
   <div class="row d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3">
     <div class="col-12 sm-12 md-12 xs-12 lg-12">
       <router-outlet name="right"></router-outlet>
     </div>
   </div>
 </div>
</main>

and in routes file - 

const appRoutes: Routes = [{
  path: '', redirectTo: 'processi', pathMatch: 'full',
  children: [
       { path: '', component: TeamDashboardComponent, outlet: 'left' },
       { path: '', component: ChatroomComponent, outlet: 'right' }
    ]
},
. . .
. . . .
. . . . .
}]

if you have any doubt in it then please let me know..

Upvotes: 1

Related Questions