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

In Angular 4 (and probably also in Angular 2) you can do:

const routes: Route[] = [
  {path: 'admin', redirectTo: 'admin/dashboard', pathMatch: 'full'},
  {
    path: 'admin',
    children: [
      {
        path: '', component: DefaultLayoutComponent,
        children: [
          {path: 'dashboard', component: DashboardComponent}
        ]
      },
      {
        path: '',
        children: [
          {path: 'login', component: LoginComponent}
        ]
      }
    ]
  }
]

By using path: '' you won't have to invent different url namespaces in order to use a simple layout. This is what the views look like:

index.html:

default-layout.html: