asked on September 16, 2018
I am able to hide the toolbar but how do I customize the toolbar using angular 6? Want to hide some icons and also create my own icons as a replacement. I would also need to call the apis from the new icons using angular. what are some of recommended ways of accessing the flexmonster javascript api's in angular. Will angular version limit any functionality?
⋅ September 17, 2018
Hello Kunal Gupta,
Thank you for writing. Please find an article for customizing Flexmonster Toolbar with all the necessary examples here: https://www.flexmonster.com/doc/customizing-toolbar/. It describes the recommended approaches of how to manage the toolbar the way you need.
Please let us know in case of any other question.
Regards,
Dmytro
⋅ March 4, 2021
Hi Dmytro,
I have the same problem, but I couldn't solve it by consulting the link you suggested.
I'm working with angular 10 and couldn't get the toolbar file to load.
Not being able to modify the file inside node modules I tried to add the flexmonster.js file in the Index.html file as a script.
The file is contained in the folder:
assets/flexmonster/flexmonster.js
and the toolbar file:
assets/flexmonster/toolbar/flexmonster.toolbar.js
The toolbar file appears not to load, with no console errors.
The componentFolder property is not defined.
Thank you
⋅ March 5, 2021
Hello, Massimo,
Thank you for writing to us.
To customize the Toolbar, our team suggests using beforetoolbarcreated event.
For further details, please have a look at the following section of the "Integration with Angular" article: https://www.flexmonster.com/doc/integration-with-angular/#!customize-toolbar.
In this guide, you can find an example on our GitHub, which can be used as a reference for your own Toolbar customization.
Please let us know if our response helped.
Best regards,
Milena
⋅ March 8, 2021
Hi Milena, I was wondering if it was possible to directly customize the flexmonster.toolbar.js file. And if so, how.
This is because I have created some customizations in the angularjs version that cannot be reported through the method you suggested.
Thank you
⋅ March 10, 2021
Hi, Massimo,
Thank you for providing further info about your case. Our team also received your second message with the attached file through email.
Sent details greatly helped us to understand the situation better.
We would like to confirm that it is possible to directly customize the flexmonster.toolbar.js file.
The customization made in the sent file seems correct, so the main issue here is that the file is not loaded to the page.
Our team suggests defining the componentFolder property - the path to the component’s folder, which default value is flexmonster/. We assume that this URL is different in your project and this causes the issue.
Please open the browser’s console and check the errors there. The path specified in the error will help you to define the componentFolder.
Let us know if our response helped.
We are looking forward to hearing from you.
Kind regards,
Milena
⋅ March 18, 2021
Hello, Massimo,
We were wondering whether our suggestion helped.
Have you tried specifying the componentFolder? Did it work for your case?
Our team will be glad to hear your feedback.
Best regards,
Milena
⋅ March 29, 2021
Hi, Massimo,
How are you?
We would like to kindly take an interest in whether our answer helped.
Did specifying the componentFolder property work for you?
Looking forward to your response.
Kind regards,
Milena
