Hi,

Sorry for the confusion. Could you please provide more details about what you are trying to achieve with the toolbar component? Are you looking to customize the layout of the toolbar based on the page you are on, or change the functionality of the toolbar buttons? It would be helpful to have more information about your specific requirements so that we can provide a more accurate answer.


Thanks

Hi again ,

I want to customize toolbar on the page also buttons. I want to change toolbar items (delete,change,add new items) according to the page.

in detail , i have toolbar component and it have create and filter buttons. in all pages use this layout and layout component getting information in localstorage.

I dont want to use this toolbar layout in all pages i want to customize this create or filter button(delete,change label, add more button etc.) in toolbar on the my selected pages.

example :

: MyProject.html :
i want to use Create New Project and Show/Hide Projects in toolbar with another function

: MyTasks.html :
i want to use Create new task button and dont show or delete filter button or add edit button with different function.

: in other pages :
i want to use layouts buttons or items.

Hi,

To implement this feature, customization is required as it is not available by default.

To customize the toolbar on different pages, you can modify the toolbar component located at /src/app/_metronic/layout/components/toolbar/toolbar.component.html.

To conditionally show or hide buttons based on the current page, you can use Angular's Router service to get the current route URL and use it in an ngIf directive.

For example, if you want to show a "Create New Project" button on the "myproject" page and a "Create New Task" button on the "mytasks" page, you can add the following code to the toolbar component:

<button *ngIf="isProjectPage()" (click)="createProject()">Create New Project</button>
 <button *ngIf="isProjectPage()" (click)="showHideProjects()">Show/Hide Projects</button>
 <button *ngIf="isTasksPage()" (click)="createTask()">Create New Task</button>

constructor(private router: Router) {}

 isProjectPage(): boolean {
 return this.router.url.includes("/projects");
 }

isTasksPage(): boolean {
 return this.router.url.includes("/tasks");
 }

createProject(): void {
 // handle create project button click
 }

 showHideProjects(): void {
 // handle show/hide projects button click
 }

 createTask(): void {
 // handle create task button click
 }