Removing header and footer when displaying logout page
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>
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>