Adding component dynamically in Ember

Question

using Ember : 1.13.11, Ember Data : 1.13.8, ember-cli : 1.13.12

I want to add a component dynamically to webpage - this webpage is template of another component don't think that it will make any difference-. Here is my code snippet in which I try to add a component named LyricsEditorLine to <div> tag, somehow like this

agenda-alpha/components/lyrics-editor.js

import Ember from 'ember';
import LyricsEditorLine  from 'agenda-alpha/components/lyrics-editor-line';

export default Ember.Component.extend({
   afterRenderEvent:function(){
      LyricsEditorLine.create().appendTo($("#in"));
 },
init:function(){
  Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
  this._super();
 }
});

agenda-alpha/templates/components/lyrics-editor.hbs

<div id='in'> </div>

every time this gives me

 'Uncaught Error: Assertion Failed: You cannot append to an existing Ember.View. Consider using Ember.ContainerView instead'

Looked for ContainerViewhere found that it is deprecated Most of the answers that I found are not using ember-cli and being a beginner makes it harder to understand

I want to be able to add components as much as the user needs

Answer 1

I think you probably want the {{component}} helper which allows to dynamically render a component.

{{component "componentName" param1=paramValue param2=anotherParamValue}}

Which means you can have (made up example)

{{component "lyrics-editor-line" line=line}}

One the best things is that componentName can be a bound property

{{component componentName line=line}}

And in your controller/component:

componentName: Ember.computed('prop1','prop2', function() {
  if (this.get('prop1') === 'A') {
    return 'my-component-a';
  }
  return 'default-component';
}),

line: computed('prop3', function() {
   return this.get('prop2');
})

Also, you can have the component helper inside an each loop (example taken from the Ember documentation)

{{#each model as |post|}}
  {{!-- either foo-component or bar-component --}}
  {{component post.componentName post=post}}
 {{/each}}