How to switch layouts in Angular2

by

In your main component html you can add the following routes outlet which you will use to switch layout.

<router-outlet name="header"></router-outlet>
<router-outlet name="navbar"></router-outlet>
<router-outlet></router-outlet>
<router-outlet name="footer"></router-outlet>

In this case you can configure your routes to switch the header, navbar if any and footer of your app when page changes. The following is an example of how you can configure your routes.

Example 1
Lets assume the first layout has only header and footer without any sidebar/navbar

export const welcome_routes: RouterConfig = [
  { path: 'firstpage', children:[
     { path: 'login', component: LoginComponent},
     { path: 'signup', component: SignupComponent},
     { path: '' , component: Header1Component, outlet: 'header'}
     { path: '' , component: Footer1Component, outlet: 'footer'}
  ]}
];

Example 2.
This is your routes config for your second layout

 export const next_layout_routes: RouterConfig = [
  { path: 'go-to-next-layout-page', children:[
     { path: 'home', component: HomeComponent},
     { path: '' , component: Header2Component, outlet: 'header'}
     { path: '' , component: NavBar2Component, outlet: 'navbar'}
     { path: '' , component: Footer2Component, outlet: 'footer'}
  ]}
];

With this its very easy to add a third and a fourth and a … layout to your page.

Hope this helps

** Updated **

RouterConfig has been changed to Routes.

So the code above will now be

export const welcome_routes: Routes = [
  { path: 'firstpage', children:[
     { path: 'login', component: LoginComponent},
     { path: 'signup', component: SignupComponent},
     { path: '' , component: Header1Component, outlet: 'header'}
     { path: '' , component: Footer1Component, outlet: 'footer'}
  ]}
];

More Related Contents:

  1. Angular 2.0 router not working on reloading the browser
  2. How to detect a route change in Angular?
  3. Angular 2: 404 error occur when I refresh through the browser [duplicate]
  4. How do I create a singleton service in Angular 2?
  5. How to go back last page
  6. Angular2 multiple router-outlet in the same template
  7. Warn user of unsaved changes before leaving page
  8. ‘router-outlet’ is not a known element
  9. Passing data into “router-outlet” child components
  10. Angular 2 unit testing components with routerLink
  11. How to pass query parameters with a routerLink
  12. Dynamic routing based on external data
  13. How do I detect user navigating back in Angular2?
  14. Using Resolve In Angular2 Routes
  15. Angular2 – Interaction between components using a service
  16. Is Angular 2’s Router broken when using HTML5 routes? [duplicate]
  17. Angular2 router.navigate refresh page
  18. Multiple canActivate guards all run when first fails
  19. Angular 2 router resolve with Observable
  20. Can’t reload/refresh active route
  21. Lazy Loading BrowserModule has already been loaded
  22. How do I navigate to a sibling route?
  23. Redirect to a different component inside @CanActivate in Angular2
  24. Pass parameter into route guard
  25. Angular 2 – Routing – CanActivate work with Observable
  26. Want to prevent Component recreation while routing in Angular 2
  27. New Angular2 router configuration
  28. angular 2 azure deploy refresh error : The resource you are looking for has been removed, had its name changed, or is temporarily unavailable
  29. Angular2 Routing – keeping state of component when route changes [duplicate]
  30. Angular 2 different components with same route

Leave a Comment