# Render a component within a Widget. (Using select-kit components within plugin code)

**URL:** <https://meta.discourse.org/t/render-a-component-within-a-widget-using-select-kit-components-within-plugin-code/84462>\
**Category:** Development\
**Created:** [April 3, 2018, 12:55pm UTC](https://meta.discourse.org/t/render-a-component-within-a-widget-using-select-kit-components-within-plugin-code/84462 "2018-04-03T12:55:25Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![duranmla](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/duranmla/32/109295_2.png) [@duranmla](https://meta.discourse.org/u/duranmla)\
**Post date:** [April 3, 2018, 12:55pm UTC](https://meta.discourse.org/t/render-a-component-within-a-widget-using-select-kit-components-within-plugin-code/84462/1 "2018-04-03T12:55:25Z")

</div>

If we successfully define a select-kit component within a plugin we are easily able to use it within a \*.hbs template file using its `pluginApiIdentifiers` however, in order to attach that component within a widget using JS code I am not able to make it work. For instance:

I have:

```plaintext
import DropdownSelectBoxComponent from 'select-kit/components/dropdown-select-box';

export default DropdownSelectBoxComponent.extend({
  pluginApiIdentifiers: ['header-profile-dropdown'],
  ...
  
  autoHighlight() { ... },

  computeContent() {
    ...
    return items;
  },

  mutateValue(id) { ... }
});

```

Then I can go to any template I want to overwrite and write like:

_(taking as an example the discovery template)_

```plaintext
...
<div id="list-area">
        {{header-profile-dropdown}}
...

```

And the snippet above will work flawlessly, **BUT how I will include that component into a widget like:**

```plaintext
    api.reopenWidget('user-dropdown', {
        html(attrs, state) {
          if (this.site.mobileView) {
            return h('div.profile-dropdown-container', [
              this.attach('header-notifications', attrs),
              --> I NEED ATTACH THE COMPONENT HERE <--
            ]);
          }

          ...
        }
      });

```

> NOTE: much of the code has been skipped to keep the post brief. Feel free to ask for the full code if needed.

PD: I have already tried to describe this issue at [How to attach a component to a widget with just markup?](https://meta.discourse.org/t/how-to-attach-a-component-to-a-widget-with-just-markup/82634) but looks like it was a too complicated explanation so I am trying to reduce the information here to make it clear and try to find an answer.

---

_[View the full topic](https://meta.discourse.org/t/render-a-component-within-a-widget-using-select-kit-components-within-plugin-code/84462)._