# Angular 2 based Kibana Plugin

**URL:** <https://discuss.elastic.co/t/angular-2-based-kibana-plugin/71731>\
**Category:** Kibana\
**Created:** [January 16, 2017, 12:34pm UTC](https://discuss.elastic.co/t/angular-2-based-kibana-plugin/71731 "2017-01-16T12:34:00Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![ranjeet8082](https://avatars.discourse-cdn.com/v4/letter/r/e9bcb4/32.png) [@ranjeet8082](https://discuss.elastic.co/u/ranjeet8082)\
**Post date:** [January 16, 2017, 12:34pm UTC](https://discuss.elastic.co/t/angular-2-based-kibana-plugin/71731/1 "2017-01-16T12:34:00Z")

</div>

Hi  
Currently, I am developing kibana plugins and we have a angular2 based application that i am asked to develop as plugin. Is it possible to use angular 2 based kibana plugin or would i have to downgrade existing angular 2 application to angular 1.x ?

Note : I am currently using Es version 2.3 & kibana version 4.3.0.

Best Regards  
Ranjeet

---

<div class="post-metadata">

**Author:** ![Kikketer](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/kikketer/32/13813_2.png) [@Kikketer](https://discuss.elastic.co/u/Kikketer)\
**Post date:** [January 16, 2017, 4:01pm UTC](https://discuss.elastic.co/t/angular-2-based-kibana-plugin/71731/2 "2017-01-16T16:01:37Z")

</div>

I haven't checked but there may be a way to transpile Angular 2 into Angular 1.4 (what Kibana lives in). And if such a thing exists, then you would want to alter a build process in your plugin to transpile the Angular 2 into Angular 1.4 THEN run through the typical Kibana build procedures.

The other way would be to create a secondary build procedure within Kibana itself to compile and optimize your Angular 2 plugin separate from Kibana. In the end it's all vanilla JS anyway.

I would recommend just writing the plugin in Angular 1.4, it'll save you a ton of headaches. And in the case of option 2 it'll actually save the size of the plugin (imagine having all of the bloat of Angular 2 just for one plugin).

---

<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:** [January 16, 2017, 4:32pm UTC](https://discuss.elastic.co/t/angular-2-based-kibana-plugin/71731/3 "2017-01-16T16:32:32Z")

</div>

You _should_ be able to use any framework to build isolated apps in Kibana. We use React to build parts of the monitoring application for instance. That said, it's not always a smooth process and you probably won't be able to integrate with other Kibana applications unless you use angular 1.4.

---

<div class="post-metadata">

**Author:** ![tarun\_kumar](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tarun_kumar/32/65948_2.png) [@tarun\_kumar](https://discuss.elastic.co/u/tarun_kumar)\
**Post date:** [January 17, 2017, 6:55am UTC](https://discuss.elastic.co/t/angular-2-based-kibana-plugin/71731/4 "2017-01-17T06:55:10Z")

</div>

Hi @spalger and @Kikketer , have you came across such kibana visualization plugin that is done is angular 2 and does things like transpiling or other way around?

---

<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:** [January 17, 2017, 5:35pm UTC](https://discuss.elastic.co/t/angular-2-based-kibana-plugin/71731/5 "2017-01-17T17:35:36Z")

</div>

I have not

---

<div class="post-metadata">

**Author:** ![Kikketer](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/kikketer/32/13813_2.png) [@Kikketer](https://discuss.elastic.co/u/Kikketer)\
**Post date:** [February 3, 2017, 8:24pm UTC](https://discuss.elastic.co/t/angular-2-based-kibana-plugin/71731/6 "2017-02-03T20:24:02Z")

</div>

No, and I wouldn't waste the time. It's not any different than asking "Can I write a ReactJS plugin for use in your Angular 1.x application". It's just not viable or worthwhile.

Angular 2 is far too different from Angular 1 to believe that they could be cross used. I'd stick with the language that Elastic is using even if you like others better 🙂

---

<div class="post-metadata">

**Author:** ![tarun\_kumar](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tarun_kumar/32/65948_2.png) [@tarun\_kumar](https://discuss.elastic.co/u/tarun_kumar)\
**Post date:** [February 4, 2017, 6:50am UTC](https://discuss.elastic.co/t/angular-2-based-kibana-plugin/71731/7 "2017-02-04T06:50:44Z")

</div>

Yes @Kikketer  
Thanks for your reply. That's what we did as well.  
Currently, would you mind helping me further on my below queries as I need to workout below problems :-

> [@How to acess search bar query string in kibana custom plugin](https://discuss.elastic.co/t/how-to-acess-search-bar-query-string-in-kibana-custom-plugin/72864/2):
>
> Hi @tarun_kumar, About the search bar, may I ask why you are unable to simply use the filter bar itself? It is also capable of doing text searches. Providing two search/filter bars on the same page might be a confusing UX for the user. To extract the date range filter applied to the dashboard, look into using the [timefilter](https://github.com/elastic/kibana/blob/master/src/ui/public/timefilter/timefilter.js) Angular service provided by Kibana. Once injected, you can call its [getBounds](https://github.com/elastic/kibana/blob/master/src/ui/public/timefilter/timefilter.js#L96) method to get an object with min and max properties. You can see an example usage [here](https://github.com/elastic/kibana/blob/master/src/ui/public/courier/fetch/strategy/search.js#L25-L26).

> [@Gridster resize listener](https://discuss.elastic.co/t/gridster-resize-listener/73352/3):
>
> Thanks a lot @thomasneirynck. I am not able to use resize\_checker lib and it returns me a function as - var ResizeChecker = Private(require('ui/vislib/lib/resize\_checker')); console.log(ResizeChecker) prints me a function which contains verious functions. I am bit new to javascripting , so how do invoke function like read() from this ResizeChecker instance? I tried console.log(ResizeChecker.prototype.read()); which returns TypeError: Cannot read property '0' of undefined

---

<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:** [March 4, 2017, 6:51am UTC](https://discuss.elastic.co/t/angular-2-based-kibana-plugin/71731/8 "2017-03-04T06:51:01Z")

</div>

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