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

i creating angular 2 application. in app.component i've got this

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

with router:

const approutes: routes = [   { path: 'profesionals', component: creareditarprofesionalscomponent },   { path: 'home', component: homecomponent },   { path: 'login', component: logincomponent },   { path: '', component: homecomponent } ]; 

when navigate login want rid of the

<header-component>  

but other pages when user logged in want display layout is. have use ng-if service archieve this? what's best way?

you can remove page. desired result achieved can make components should display header-component child route of it.

you can achieve this:

{ path: 'dashboard', component:  headercomponent, children: [   { path: '', component: headercomponent },   { path: 'mypath', component: mycomponent } ] }, { path: 'login', component: logincomponent } 

this way every route child of headercomponent route display headercomponent , child component.

and login not display headercomponent.