Angular Change Layout Toolbar Component Item Properties
Hi , i want to customize toolbar component, for example;when my MyProjects page is load i want to
use "filter" and "create new task buttons" in classic layout component or when i load other component i dont want to use layouts buttons i want to create new buttons in classic component change layouts display properties or other properties(button label, button display, another configs). finally I want to change the layout according to the page.
use "filter" and "create new task buttons" in classic layout component or when i load other component i dont want to use layouts buttons i want to create new buttons in classic component change layouts display properties or other properties(button label, button display, another configs). finally I want to change the layout according to the page.
Replies (5)
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
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.
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.
I am looking for this too
Deleted comment
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
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:
In this example, we"re using the *ngIf directive to conditionally show or hide toolbar items based on whether the current page is a project page or a tasks page. We"re also using the Router service to determine the current page URL and trigger different click handlers based on the toolbar item clicked.
With this setup, you can now customize the toolbar buttons and items on different pages based on your requirements.
Thanks
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
}In this example, we"re using the *ngIf directive to conditionally show or hide toolbar items based on whether the current page is a project page or a tasks page. We"re also using the Router service to determine the current page URL and trigger different click handlers based on the toolbar item clicked.
With this setup, you can now customize the toolbar buttons and items on different pages based on your requirements.
Thanks
that"s great... but if we need to use classic component , we have to use this to the classic component. such as show or hide appToolbarFilterButton or other button .
any way this works for me. thank a lot
any way this works for me. thank a lot
React Dev Vacancy
KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
