Change app.toolbar display per page
Hi ! I want to change toolbar display in spesific page in Angular . For example i want to dont toolbar show in /contactprofile page how can i do this how can i configure layout items?
Thanks.
Replies (1)
Hi,
Sorry for the inconvenience. There isn't a dedicated helper function for this feature. However, you can achieve this through manual configuration within the layout component.
Here's how you can do it:
Locate the LayoutComponent in your Angular project. This component typically handles the layout and configuration.
/angular/demo1/src/app/_metronic/layout/layout.component.ts
Inside the LayoutComponent class, subscribe to the layoutConfigSubject observable provided by the LayoutService.
In the subscription callback, you can update the configuration of the toolbar's display based on the current route. If the route matches the /contactprofile page, you can set the toolbar.display property to false to hide the toolbar.
Here's an example implementation:
import { Component, OnDestroy, OnInit } from "@angular/core";
import { LayoutService } from "path-to-layout-service"; // Adjust the path
@Component({
selector: "app-layout",
templateUrl: "./layout.component.html",
styleUrls: ["./layout.component.scss"]
})
export class LayoutComponent implements OnInit, OnDestroy {
private unsubscribe: Subscription[] = [];
constructor(private layoutService: LayoutService) {}
ngOnInit() {
const subscr = this.layoutService.layoutConfigSubject
.asObservable()
.subscribe((config) => {
this.updateToolbarDisplay(config);
this.updateProps(config); // existing function
});
this.unsubscribe.push(subscr);
}
ngOnDestroy(): void {
this.unsubscribe.forEach((sb) => sb.unsubscribe());
}
updateToolbarDisplay(config: any) {
// Get the current route
const currentRoute = window.location.pathname;
// Check if the route is "/contactprofile"
if (currentRoute === "/contactprofile") {
// Hide the toolbar
config.toolbar.display = false;
} else {
// Show the toolbar
config.toolbar.display = true;
}
// Apply the updated config
this.layoutService.setModel(config, true);
}
}Remember to adjust the path where necessary.
If the route matches /contactprofile, the toolbar will be hidden; otherwise, it will be shown.
Thanks
