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:
- 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';
});
}
}
- In your component's HTML file:
< ng-container *ngIf="shouldShowToolbar">
< app-toolbar class="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
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
