How to load a component dynamically into a container in Ember JS

Question

I have a container component

{{container}}

Whose .hbs (template) file has a

<div id='box'></div>
<button>Click Me</button>

When the button is clicked I would like another component (say {{image}} to be loaded into it.

Is this possible?

Answer 1

Yes. its possible using component helper. Reference

For your use case, you can simply say, {{#if showImage}} {{image-component }} {{/if}} and toggle showImage property upon clicking button