Angular 5 delete sibling components when starting

1

I have the following structure in parent component app.component

<app-header></app-header>
<router-outlet></router-outlet>  
<app-footer></app-footer> 

in router-outlet the dynamic components are loaded (home, contact etc). I have a component called login, which is loaded with router-outlet. I have tried in many ways to make that when loading login remove app-header and app-footer but I can not find the form. How can I do it?

    
asked by Gustavo Renjifo 08.05.2018 в 16:19
source

1 answer

1

I can think of two solutions:

1. That the Login component is not within that "layout".

You could do something like

export const ROUTES: Routes = [
    { path: '', redirectTo: 'login', pathMatch: 'full' },   // Main redirect
    {
        path: '',
        children: [
            { path: 'login', component: LoginComponent },
            { path: 'signup', component: SignupComponent }
        ]
    },
    {
        path: '',
        canActivate: [AuthGuard],
        component: LayoutComponent,
        children: [
            //... resto de componentes
        ]
    }

where LayoutComponent is the one with the template

<app-header></app-header>
<router-outlet></router-outlet>  
<app-footer></app-footer> 

2. Use *ngIf to decide if the other components are used, having an attribute in the app component to decide whether to show the header or not.

    <app-header *ngIf="mostrar"></app-header>
    <router-outlet></router-outlet>  
    <app-footer *ngIf="mostrar"></app-footer> 
    
answered by 08.05.2018 в 16:43