Delete header and footer when displaying exit page

Question

I have added the code below to my app.component.html

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

and in my routing file i use 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 was displaying the logout page, the header and footer are still present. This is true since my title also contains user information.

Secondly, I have TempComponent and TempComponent1 when it shows that I have to show the header and footer in each component.

Is there a solution or should I change my approach? I do not want to copy and skip the header and footer in each template.

Answer 1

, / , , router-outlet . - :

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

app.component.html - <router-outlet></router-outlet>

home.component .

, / , .

, , / , , , / , . a standard-page.component.

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

Home, Temp, Temp2 (not Logout) "" , / .

. TempComponent html.

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

Answer 2

userIsLogged() , true, , false - ( ). * ngIf, .

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

:

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

Answer 3

The best way to achieve this is to create a separate login / logout / registration route / forget the password pages, but if you don't want to change the structure of your application, you can see NgSwitchwhich switches the views based on conditions