How to switch layouts in Angular2

Question

What is the best practices way of using two entirely different layouts in the same Angular2 application? For example in my /login route I want to have a very simple box hori

Answer 1

Another simple way is define children routes:

const appRoutes: Routes = [
  {
    path: 'fullLayout',
    component: FullLayoutComponent,
    children: [
      { path: 'view', component: HomeComponent },
    ]
  }, {
    path: 'simpleLayout',
    component: SimpleLayoutComponent,
    children: [
      { path: 'view', component: HomeComponent },
    ]
  }
];

/fullLayout/view - shows full layout structure

/simpleLayout/view - shows simple layout structure

app.component.html

full-layout.component.html

Full layout

FOOTER

simple-layout.component.html

Simple layout