Removing header and footer when displaying logout

Question

I have added below code in my app.component.html

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

and in my routing file I am using below code

import { Routes, RouterModule } from '@angular/router';
const appRoutes: Routes = [
    { path: '', component: Home },
    { path: 'temp', component: TempComponent },
    { path: 'temp2', component: TempComponent2 },
    { path: 'logout', component: LogoutComponent },
    { path: '**', redirectTo: '' }
];

export const routing = RouterModule.forRoot(appRoutes);

The problem is when I render logout page the header and footer are still present. Which is in correct as my header has user information also.

Second thing is I have TempComponent and TempComponent1, when it renders I have to show header and footer in each component also.

Is there a solution or should I change my approach? I don't want to copy and past the header and footer in each and every template.

Answer 1

The best way to achieve this - is create separate route for login/logout/register/forget password pages but if you do not want to change your app structure then you can look out at NgSwitch which is switching views on basis of conditions

Answer 2

You can add a method userIsLogged() in the app root component that returns true if the user is logged in and false if not (your component can use a service to check that). You can then use the structural directive *ngIf to hide the header and footer depending the return value of the method.

<app-header *ngIf="userIsLogged()"></app-header>
<router-outlet></router-outlet>
<app-footer *ngIf="userIsLogged()></app-footer>

Updated Code :

    <app-header *ngIf="userIsLogged()"></app-header>
    <router-outlet></router-outlet>
    <app-footer *ngIf="userIsLogged()"></app-footer>

Answer 3

One approach to avoid having header/footer in each page would be to change your routing so you have a another router-outlet at the child level. Something like this:

const appRoutes: Routes = [
    { 
      path: '', 
      children: [
        { path: '', component: HomeComponent },
        { path: 'temp', component: TempComponent },
        { path: 'temp2', component: TempComponent2 },
       ]
      component: HomeComponent
    },      
    { path: 'logout', component: LogoutComponent },
    { path: '**', redirectTo: '' }
];

Then the top-level app.component.html template is just <router-outlet></router-outlet>

And the home.component template contains the header and footer elements and the child router outlet.

The point here is that the header/footer are removed from the root template, so they won't appear everywhere.

Another possibility is that rather than cutting/pasting header and footer as you put it, you can create a wrapper element for all pages that want the standard header/footer e.g. a standard-page.component.

<app-header></app-header>
   <ng-content></ng-content>
<app-footer></app-footer>

Then in Home, Temp, Temp2 (not Logout), you can wrap them as 'standard' pages that require header/footer.

E.g. for TempComponent html.

<standard-page>
  //TempComponent content here ..
</standard-page>