How to programatically add component via controller action in ember 2.x

Question

I am being faced with the same problem on

How to programatically add component via controller action However since I am using ember cli, I am unable to do so. Here is my source code

import Ember from "ember";
export default Ember.Component.extend({
    actions : {
        remove : function(){
            this.remove();
        },
        add : function()
        {
            Ember.AuthorNameComponent.create().appendTo($('#authors'));
        }
    },
});

When I try to run this code, I get undefined error. Also name of component is author-name.

Any help, how can I create component via programmatically?

Answer 1

You need to import the component, then you don't need the Ember Global.

import AuthorNameComponent from '../components/author-name-component'

Another way is to have an array of items and base the list of AuthorNameComponent from that.

{{#each items as |item|}}
    {{author-name name=item.name}}
{{/each}}