Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$
How to disable app-toolbar in some pages? Or change by Page?
I am trying to eliminate the title and toolbar from some paths, I do see here where we have it,
<ng-container *ngIf="appToolbarDisplay">
<app-toolbar class="app-toolbar" [ngClass]="appToolbarCSSClass" id="kt_app_toolbar"
[appToolbarLayout]="appToolbarLayout"></app-toolbar>but I cannot seem to find where to place false for appDisplayToolbar.
I have Tried This:
{
path: "locations",
loadChildren: () =>
import("./locations/locations.module").then((m) => m.LocationsModule),
data:{ appToolbarDisplay: false}
},It doesn't work. How do I exclude toolbar from some?
Replies (1)
Hi Kenneth,
It seems the option is not there. Here's how you can do it:
1. In your component TypeScript file:
import { Router, NavigationEnd } from "@angular/router";
import { filter } from "rxjs/operators";
// ...
export class YourComponent {
shouldShowToolbar: boolean = true; // Set the initial value
constructor(private router: Router) {
router.events.pipe(
filter(event => event instanceof NavigationEnd)
).subscribe((event: NavigationEnd) => {
const currentPath = event.url;
console.log("Current Path:", currentPath);
// Update the boolean based on the current path
this.shouldShowToolbar = currentPath !== "/exclude-toolbar";
});
}
}2. In your component's HTML file:
< ng-container *ngIf="shouldShowToolbar">
< app-toolbar class="app-toolbar" ></app-toolbar>
< /ng-container>
In this example, the `shouldShowToolbar` variable is initially set to `true`. Then, in the subscription to the router events, it's updated based on the current path. The toolbar will only be displayed if `shouldShowToolbar` is `true`.
Remember to adjust the path (`'/exclude-toolbar'` in this case) based on your specific use case.
Thanks
