Is it possible to have a multiple router-outlet in the same template?

Is it possible to have a multiple router-outlet in the same template?

Yes! We can use multiple router-outlets in same template by configuring our routers and simply add the router-outlet name. You can see in the example.


Syntax-
<div class="row">
  <div class="user">
    <router-outlet name="userList"></router-outlet>
  </div>
  <div class="userInfo">
    <router-outlet name="userInfo"></router-outlet>
  </div>
</div>

And setup your route config:

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'user', component: userComponent, children: [
     { path: 'userList', component: userListComponent, outlet: 'userList' },
     { path: ':id', component: userInfoComponent, outlet: 'userInfo' }]
  }];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
})
export class RoutingModule { }

Angular2 - Routing Concepts

What is Routing in Angular 2? What is Routes?
What is Router Imports? What is RouterOutlet?
Is it possible to have a multiple router-outlet in the same template? What is RouterLink?

ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Buy Books Online at Best Prices

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.