# Sharing custom angular directives between plugins

**URL:** <https://discuss.elastic.co/t/sharing-custom-angular-directives-between-plugins/123651>\
**Category:** Kibana\
**Created:** [March 12, 2018, 11:08pm UTC](https://discuss.elastic.co/t/sharing-custom-angular-directives-between-plugins/123651 "2018-03-12T23:08:08Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Andres\_Gonzalez](https://avatars.discourse-cdn.com/v4/letter/a/96bed5/32.png) [@Andres\_Gonzalez](https://discuss.elastic.co/u/Andres_Gonzalez)\
**Post date:** [March 12, 2018, 11:08pm UTC](https://discuss.elastic.co/t/sharing-custom-angular-directives-between-plugins/123651/1 "2018-03-12T23:08:08Z")

</div>

Hello.

I have written some custom plugins for Kibana. There are common directives I have been replicating in each plugin. For instance in order to add a common header for my plugin pages, I create and add a directive to each plugin as follows:

```
uiModules.get('app/my-plugin', []).directive('ngcustomheader', 
function() {
  return {
    restrict: 'A',
    template: headerTemplate
  }});

```

Where headerTemplate is just an import as follows:

```
import headerTemplate from './templates/header.html';

```

I would like to be able to add this custom directive in such a way that is accessible from all my plugins.

Is this possible?. How can I accomplish this?.

Thanks.

---

<div class="post-metadata">

**Author:** ![spalger](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/spalger/32/14092_2.png) [@spalger](https://discuss.elastic.co/u/spalger)\
**Post date:** [March 14, 2018, 3:06am UTC](https://discuss.elastic.co/t/sharing-custom-angular-directives-between-plugins/123651/2 "2018-03-14T03:06:38Z")

</div>

I see a few options:

1. You can create an npm module with your shared code in it, publish it to npm, and pull it in as a dependency.

2. Put these resources in a "core" style plugin. Plugins can import from one another on the client-side with `import 'plugins/{core-plugin-id}/{path-in-plugin-public-directory}'` just like the module ids in the uiExport listing.

3. If don't want to publish to npm, and you want people to be able to install a single plugin without having to install the core plugin you could also do what we do in Kibana and use a "monorepo" style setup. In this setup one repository has all the code for each plugin as well as common code. Then each plugin can reference the common code as a linked npm package with yarn like we do here: [https://github.com/elastic/kibana/blob/master/package.json#L83](https://github.com/elastic/kibana/blob/master/package.json#L83)

---

<div class="post-metadata">

**Author:** ![Andres\_Gonzalez](https://avatars.discourse-cdn.com/v4/letter/a/96bed5/32.png) [@Andres\_Gonzalez](https://discuss.elastic.co/u/Andres_Gonzalez)\
**Post date:** [March 14, 2018, 8:15pm UTC](https://discuss.elastic.co/t/sharing-custom-angular-directives-between-plugins/123651/3 "2018-03-14T20:15:13Z")

</div>

Thanks for your help Spencer. I think the third solution you propose is what we would like to do.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [April 11, 2018, 8:15pm UTC](https://discuss.elastic.co/t/sharing-custom-angular-directives-between-plugins/123651/4 "2018-04-11T20:15:15Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.