delete header and footer with my page gestion-projet - angular8

Question

I want to delete header, footer and preloader in my page gestion-projet i use location in my code but it not works i have error when i inject the id what is the good syntax?
app.component.html
<app-preloader *ngIf="!(location == '/auth'|| location=='/dashbord'|| location == '/gestion-employee'
|| location =='/update-projet/:id')"></app-preloader>
<app-header *ngIf="!(location == '/update-projet/:id' || location == '/coming-soon' || location ==
'/gestion-employee' || location == '/not-found' || location =='/auth' ||location=='/dashbord')">
</app-header>
<router-outlet></router-outlet>
<app-footer *ngIf="!(location == '/update-projet/:id' || location == '/coming-soon' || location ==
'/gestion-employee' || location == '/not-found' || location == '/auth'|| location=='/dashbord')">
</app-footer>

Answer 1

It would be better to do this kind of operations in ts file. It will be easy to debug and less work for angular when recompiling template.
Also consider following example
if (a != b || c != d)
If you want to take negation out as common then your || should have to convert to &&
Like
if (!( a == b && c == d))
I think you did mistake here.
And you can do this is ts like
showPreloader = !(location == '/auth' && location=='/dashbord' && location == '/gestion-employee') && location.indexOf('/update-projet/') > -1);
showHeaderFooter = !(location.indexOf('/update-projet/') > -1 && location == '/coming-soon' && location == '/gestion-employee' && location == '/not-found' && location =='/auth' && location=='/dashbord')
Then your template will become like this
<app-preloader *ngIf="showPreloader"></app-preloader>
<app-header *ngIf="showHeaderFooter"></app-header>
<router-outlet></router-outlet>
<app-footer *ngIf="showHeaderFooter"></app-footer>
Also make sure you are updating these booleans after every route change

Answer 2

my file app.component.ts
`
import { Component, OnInit, OnDestroy } from '#angular/core';
import { Router, NavigationStart, NavigationCancel, NavigationEnd }
from'#angular/router';
import { Location, LocationStrategy, PathLocationStrategy } from
'#angular/common';
import { filter } from 'rxjs/operators';
declare let $: any;
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
providers: [
Location, {
provide: LocationStrategy,
useClass: PathLocationStrategy
}
]
})
export class AppComponent implements OnInit, OnDestroy {
location: any;
routerSubscription: any;
constructor(private router: Router) {
}
ngOnInit() {
this.recallJsFuntions();
}
recallJsFuntions() {
this.router.events
.subscribe((event) => {
if ( event instanceof NavigationStart ) {
$('.preloader').fadeIn('slow');
}
});
this.routerSubscription = this.router.events
.pipe(filter(event => event instanceof NavigationEnd || event instanceof NavigationCancel))
.subscribe(event => {
$.getScript('../assets/js/custom.js');
$('.preloader').fadeOut('slow');
this.location = this.router.url;
console.log(location);
if (!(event instanceof NavigationEnd)) {
return;
}
window.scrollTo(0, 0);
});
}
ngOnDestroy() {
this.routerSubscription.unsubscribe();
}
}
`