Different layouts for Login Page (one for login and other layout for others) in Angular 2

Question

I creating an angular 2 application. In my app.component I've got this

<header-component><header-component>
<router-outlet></router-‌​outlet>

with the router:

const appRoutes: Routes = [
  { path: 'profesionals', component: CrearEditarProfesionalsComponent },
  { path: 'home', component: HomeComponent },
  { path: 'login', component: LoginComponent },
  { path: '', component: HomeComponent }
];

when I navigate to login I want to get rid of the

<header-component> 

but for all other pages when the user is logged in I just want to display the layout as it is. Do I have to use ng-if with a service to archieve this? What's the best way?

Answer 1

You can remove the from you page. For your desired result to be achieved you can make all the components that should display the header-component as a child route of it.

You can achieve it like this:

{ path: 'dashboard', component:  HeaderComponent, children: [
  { path: '', component: HeaderComponent },
  { path: 'mypath', component: MyComponent } ]
},
{ path: 'login', component: LoginComponent }

This way every route that is a child of the HeaderComponent route will display the HeaderComponent and the child component.

And your login will not display the HeaderComponent.