2

I'm using an third party component for showing my organization units in a tree view and i want to listen to an click event on each item of this tree and do some thing after this event but i have not access to this element. only thing i have is :

    <mui-org-chart (itemClick)='showOuManagementDialog($event)' [topEmployee]="displayOuResult"
        direction="vertical"></mui-org-chart>

but i want to change inner template of this component can you help me friends?

hosein
  • 139
  • 1
  • 4
  • 14
  • What component is this? Is this a third party lib? – Hugo Noro Dec 28 '19 at 11:18
  • @HugoNoro yes it is – hosein Dec 28 '19 at 11:21
  • In that case unless this component exposes click events you don’t have much option. What you can do is either try to extend the component ou check the source code and implement your own version – Hugo Noro Dec 28 '19 at 11:25
  • could you show the html actually generated by the component? you might be able to access each "item" element and add a click event through dom manipulation in the .ts file like the person did in this [answer](https://stackoverflow.com/a/54130039/4566852). – Cicero Dec 28 '19 at 11:39

1 Answers1

3

You have to go to GitHub and click the fork button, modify the library to do what you want, build the library and use your own modified version.

The library can be found here:

https://github.com/ashishmondal/mondal-ui

Here's instructions on how to fork:

https://help.github.com/en/github/getting-started-with-github/fork-a-repo

After you've modified the library you have three options:

  1. Build and npm link the build to your own project.
  2. Rename the npm package, build and publish to your own npm account and then use that new package.
  3. Test your new features and then open a pull request to contribute to the source project.

Here's a tutorial on npm link:

https://medium.com/dailyjs/how-to-use-npm-link-7375b6219557

Here's the documentation on Angular libraries:

https://angular.io/guide/libraries

Here's the npm documentation on publishing:

https://docs.npmjs.com/packages-and-modules/contributing-packages-to-the-registry

This is how the world of open source works. If there is something you need that is missing, then you help with the project and contribute new features.

Reactgular
  • 52,335
  • 19
  • 158
  • 208