Mtronic8 for angular how to update the page title and page breadcrumbs of detail components which are not defined in sidebar menu component
i followed the same as per this link
https://preview.keenthemes.com/metronic8/angular/docs/breadcrumb-service
but its conflicting with the ScriptsInitComponent.initPageInfo() where its trying to recalculate the page title again this.pageInfo.calculateTitle();
and the page title is getting updated with the current theme color name e.g Light/Dark/System
Replies (1)
Apologies for the oversight, and we regret any delay in our response.
Here's a sample solution with code snippets to help you update the page title and breadcrumbs in your detail components without conflicts with the ScriptsInitComponent logic:
Customize Page Title in Detail Component:
In your detail component, you can set the page title using the PageInfoService when the component initializes and reset it when the component is destroyed. Here's a code example:
import { PageInfoService } from "path-to-your-page-info-service"; // Import the PageInfoService
import { OnInit, OnDestroy } from "@angular/core";
export class YourDetailComponent implements OnInit, OnDestroy {
constructor(private pageInfo: PageInfoService) {}
ngOnInit(): void {
// Set the page title specific to this detail component
this.pageInfo.setTitle("Your Detail Page Title");
}
ngOnDestroy(): void {
// Reset the page title when the component is destroyed
this.pageInfo.setTitle("Dashboard"); // Set it to a default title or as needed
}
}Customize Breadcrumbs in Detail Component:
For breadcrumbs, you can also customize them in your detail component. Create an array of PageLink objects representing the breadcrumbs you want to display, and set it using the PageInfoService. Here's a code example:
import { PageInfoService } from "../../core/page-info.service";
import { OnInit, OnDestroy } from "@angular/core";
export class YourDetailComponent implements OnInit, OnDestroy {
constructor(private pageInfo: PageInfoService) {}
ngOnInit(): void {
// Customize the breadcrumbs for this detail component
const customBreadcrumbs = [
{ title: "Home", path: "/home", isSeparator: false, isActive: false },
{ title: "Detail Page", path: "/detail", isSeparator: false, isActive: true },
];
this.pageInfo.setBreadcrumbs(customBreadcrumbs);
}
ngOnDestroy(): void {
// Optionally, reset breadcrumbs when the component is destroyed
this.pageInfo.setBreadcrumbs([]); // Set it to an empty array or as needed
}
}You can have complete control over the page title and breadcrumbs for each detail component without interfering with the global calculations performed by ScriptsInitComponent. Adjust the titles and breadcrumb structures to match your specific requirements.
