Trying to create a dynamic navigation system where different items are displayed based on the website path. For example, if the path is http://mywebsite.com/path, certain navigation items should be hidden while others are shown.
My current setup includes...
app.component.html
<ul (click)="navLinkClick()" class="nav-page_ul">
<a *ngIf="!routeHidden" [routerLink]="['']"><li class="go-to-website">go to site</li></a>
<a *ngIf="routeHidden" [routerLink]="['1']"><li>1</li></a>
<a *ngIf="routeHidden" [routerLink]="['2']"><li>2</li></a>
<a *ngIf="routeHidden" [routerLink]="['3']"><li>3</li></a>
<a *ngIf="routeHidden" [routerLink]="['4']"><li>4</li></a>
app.component.ts
ngOnInit() {
this.router.events.subscribe( (e) => {
if (e instanceof NavigationStart) {
if (e.url === '/6' || e.url === '/7' || e.url === '/8' || '/9') {
this.routeHidden = false;
} else {
this.routeHidden = true;
}
}
});
}
The issue I'm facing is that regardless of the route, only the "go-to-website" navigation item is being displayed and none of the rest. I'm unsure of what mistake I might be making...
Thank you for your help!