Angular2 multiple router-outlet in the same template

Question

Is it possible to have multiple router-outlet in the same template   If yes then how to configure the routes   I am using angular2 beta

User · Answer

lt a  routerLink      outlets    list   streams    details   parties         gt Link lt  a gt    lt div id  list  gt       lt router-outlet name  list  gt  lt  router-outlet gt   lt  div gt   lt div id  details  gt       lt router-outlet name  details  gt  lt  router-outlet gt   lt  div gt              path   admin       component  AdminLayoutComponent      children                   path              component  AdminStreamsComponent           outlet  list                           path   stream  id           component  AdminStreamComponent          outlet  details

User · Answer

yes you can  but you need to use aux routing  you will need to give a name to your router-outlet   lt router-outlet name  quot auxPathName quot  gt  lt  router-outlet gt   and setup your route config   RouteConfig      path      name   RetularPath   component  OneComponent  useAsDefault  true      aux   auxRoute   name   AuxPath   component  SecondComponent      Check out this example  and also this video   Update for RC 5 Aux routes has changed a bit  in your router outlet use a name   lt router-outlet name  quot aux quot  gt   In your router config   path    auxRouter   component  secondComponentComponent  outlet   aux

User · Answer

You can have multiple router-outlet in same template by configuring your router and providing name to your router-outlet  you can achieve this as follows   Advantage of below approach is thats you can avoid dirty looking URL with it  eg   home aux login  etc   Assuming on load you are bootstraping appComponent   app component html   lt div class  layout  gt       lt div class  page-header  gt            first outlet to load required component          lt router-outlet name  child1  gt  lt  router-outlet gt       lt  div gt       lt div class  content  gt            second outlet to load required component          lt router-outlet name  child2  gt  lt  router-outlet gt       lt  div gt   lt  div gt    Add following to your router         path   home       you can keep it empty if you do not want  home     component   appComponent       children                          path                  component  childOneComponent              outlet   child1                                   path                  component  childTwoComponent              outlet   child2                      Now when  home is loaded appComponent will get load with allocated template  then angular router will check the route and load the children component in specified router outlet on the basis of name    Like above you can configure your router to have multiple router-outlet in same route

User · Answer

Aux routes syntax has changed with the new RC 3 router   There are some known issues with aux routes but basic support is available   You can define routes to show components in a named  lt router-outlet gt   Route config   path   chat   component  ChatCmp  outlet   aux       Named router outlet   lt router-outlet name  aux  gt      Navigate aux routes  this  router navigateByUrl   crisis-center aux chat open true       It seems navigating aux routes from routerLink is not yet supported    lt a  routerLink     team 3 aux  chat open true    gt Test lt  a gt    lt a  routerLink      team 3    outlets   aux   chat      gt c lt  a gt    Not tried myself yet  See also Angular2 router in one component  RC 5 routerLink DSL  same as createUrlTree parameter  https   angular io docs ts latest api router index Router-class html   createUrlTree-anchor

User · Answer

You can not use multiple router outlets in the same template with ngIf condition  But you can use it in the way shown below   lt div  ngIf  quot loading quot  gt     lt span gt loading true lt  span gt     lt ng-container  ngTemplateOutlet  quot template quot  gt  lt  ng-container gt   lt  div gt    lt div  ngIf  quot  loading quot  gt     lt span gt loading false lt  span gt     lt ng-container  ngTemplateOutlet  quot template quot  gt  lt  ng-container gt     lt  div gt      lt ng-template  template gt       lt router-outlet gt   lt  router-outlet gt     lt  ng-template gt

User · Answer

There seems to be another  rather hacky  way to reuse the router-outlet in one template  This answer is intendend for informational purposes only and the techniques used here should probably not be used in production  https   stackblitz com edit router-outlet-twice-with-events The router-outlet is wrapped by an ng-template  The template is updated by listening to events of the router  On every event the template is swapped and re-swapped with an empty placeholder  Without this  quot swapping quot  the template would not be updated  This most definetly is not a recommended approach though  since the whole swapping of two templates seems a bit hacky  in the controller    ngOnInit         this router events subscribe  routerEvent  Event    gt          console log routerEvent         this myTemplateRef   this trigger        setTimeout      gt            this myTemplateRef   this template           0                in the template   lt div class  quot would-be-visible-on-mobile-only quot  gt    This would be the mobile-layout with a router-outlet  inside a template       lt br gt     lt ng-container  ngTemplateOutlet  quot myTemplateRef quot  gt  lt  ng-container gt   lt  div gt    lt hr gt    lt div class  quot would-be-visible-on-desktop-only quot  gt    This would be the desktop-layout with a router-outlet  inside a template       lt br gt     lt ng-container  ngTemplateOutlet  quot myTemplateRef quot  gt  lt  ng-container gt   lt  div gt    lt ng-template  template gt       lt br gt      This is my counter    counter       inside the template  the router-outlet should follow      lt router-outlet gt       lt  router-outlet gt   lt  ng-template gt    lt ng-template  trigger gt    template to trigger changes     lt  ng-template gt

User · Answer

Yes you can as said by  tomer above  i want to add some point to  tomer answer     firstly you need to provide name to the router-outlet where you want to load the second routing view in your view   aux routing angular2   In angular2 routing few important points are here    path or aux  requires exactly one of these to give the path you have to show as the url   component  loader  redirectTo  requires exactly one of these  which component you want to load on routing  name or as  optional   requires exactly one of these  the name which specify at the time of routerLink  data  optional  whatever you want to send with the routing that you have to get using routerParams at the receiver end      for more info read out here and here     import  RouteConfig  AuxRoute  from  angular2 router    RouteConfig     new AuxRoute  path    home   component  HomeCmp      class MyApp

[angular] Angular2 multiple router-outlet in the same template

Examples related to angular

Examples related to angular2-routing

Examples related to angular2-template