# Dynamically rendering a component via a template helper

**URL:** <https://discuss.emberjs.com/t/dynamically-rendering-a-component-via-a-template-helper/6849>\
**Category:** Uncategorized\
**Created:** [December 4, 2014, 9:56am UTC](https://discuss.emberjs.com/t/dynamically-rendering-a-component-via-a-template-helper/6849 "2014-12-04T09:56:46Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![jig1](https://avatars.discourse-cdn.com/v4/letter/j/919ad9/32.png) [@jig1](https://discuss.emberjs.com/u/jig1)\
**Post date:** [December 4, 2014, 9:56am UTC](https://discuss.emberjs.com/t/dynamically-rendering-a-component-via-a-template-helper/6849/1 "2014-12-04T09:56:46Z")

</div>

I am currently trying to render a component in a helper dynamically based on a passed in value (for simplicity I have hardcoded the value as my-foo in the examples)

I have used the following code in my helper to attempt to achieve this

```
function renderComponent(componentName, options) {  
    var helper = Ember.Handlebars.resolveHelper(options.data.view.container, componentName);
    return helper.call(this, options);
}

export {
  renderComponent
};

export default Ember.Handlebars.makeBoundHelper(renderComponent);

```

From the following post [http://discuss.emberjs.com/t/how-to-dynamically-load-ember-components-by-name-in-a-template/6312](http://discuss.emberjs.com/t/how-to-dynamically-load-ember-components-by-name-in-a-template/6312)

It is being invoked from a view via…

```
var Widget = Ember.View.extend({
   tagName: 'li',
   template: Ember.Handlebars.compile('{{render-component "my-foo"}}')
});

export default Widget;

```

I seem to get the following error…

Uncaught TypeError: Cannot read property ‘pushChildView’ of nullvendor.js:54334 merge.appendChildvendor.js:56121 CoreView.extend.appendChildvendor.js:22824 EmberObject.create.helpervendor.js:23051 viewHelpervendor.js:17971 EmberHandlebars.makeViewHelperdashboard/helpers/render-component.js:11 renderComponentvendor.js:20460 bindView.normalizedValuevendor.js:23412 SimpleHandlebarsView.rendervendor.js:52700 EmberRenderer\_createElementvendor.js:23802 Renderer\_renderTreevendor.js:23879 (anonymous function)vendor.js:13853 DeferredActionQueues.invokevendor.js:13923 DeferredActionQueues.flushvendor.js:13309 Backburner.endvendor.js:13364 Backburner.runvendor.js:13729 executeTimersvendor.js:13718 (anonymous function)

If I hard code the component name it seems to work

```
Ember.Handlebars.compile('{{my-foo}}')

```

I am using ember 1.8.1 and ember-cli 0.1.3. I am pretty new to Ember so any help would be greatly appreciated.

Thanks in advance

---

<div class="post-metadata">

**Author:** ![rlivsey](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/rlivsey/32/14737_2.png) [@rlivsey](https://discuss.emberjs.com/u/rlivsey)\
**Post date:** [December 4, 2014, 11:30am UTC](https://discuss.emberjs.com/t/dynamically-rendering-a-component-via-a-template-helper/6849/2 "2014-12-04T11:30:59Z")

</div>

I’ve written an addon which should help you - [GitHub - minutebase/ember-dynamic-component: Ember addon to render a dynamic component](https://github.com/minutebase/ember-dynamic-component)

---

<div class="post-metadata">

**Author:** ![jig1](https://avatars.discourse-cdn.com/v4/letter/j/919ad9/32.png) [@jig1](https://discuss.emberjs.com/u/jig1)\
**Post date:** [December 4, 2014, 12:08pm UTC](https://discuss.emberjs.com/t/dynamically-rendering-a-component-via-a-template-helper/6849/3 "2014-12-04T12:08:32Z")

</div>

Thanks that is very useful I will check it out. Any idea why this error actually occurs?

> [@jig1](#):
>
> Uncaught TypeError: Cannot read property 'pushChildView

I am interested in why my initial approach failed?

Thanks for your time.

---

<div class="post-metadata">

**Author:** ![leejt489](https://avatars.discourse-cdn.com/v4/letter/l/ccd318/32.png) [@leejt489](https://discuss.emberjs.com/u/leejt489)\
**Post date:** [March 31, 2015, 10:04pm UTC](https://discuss.emberjs.com/t/dynamically-rendering-a-component-via-a-template-helper/6849/4 "2015-03-31T22:04:16Z")

</div>

This is now integrated into Ember core [Ember.js 1.10.0 and 1.11 Beta Released](http://emberjs.com/blog/2015/02/07/ember-1-10-0-released.html#toc_component-helper)