All geek questions in one place

Different layouts for login page (one for login and another layout for others) in Angular 2

I am creating an angular 2 application. In my app.component I have 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 i go to login i want to get rid of

<header-component>

but for all other pages, when the user is logged in, I just want to display the layout as is. Should I use ng-if with a service to archive this? What is the best way?

+4
source share
2 answers

You can remove the page from your page. To achieve the desired result, you can make all the components that should display the header component as its child route.

You can achieve this as follows:

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

, , HeaderComponent, HeaderComponent .

HeaderComponent.

+1

Source: https://habr.com/ru/post/1654395/

More articles:


All Articles