Insert component in Controller action EmberJS

Question

well i need to insert a component when the user click on button, my code:

dash.hbs

<button class="btn btn-primary" {{action 'solisXTax'}}> Consul</button>

dash.js //controller

actions:{ solisXTax(){ "theCode" }, }

and my componenet is ember-chart,

{{ember-chart type="Bar" 
    data=solsGraph 
    width=500 height=350 
    options=opcionesGrafica 
    legend=true}}

Thanks

Answer 1

I don't know if you are familiar with the handlebars conditionals, but you should read more about that in the guides

You can use a conditional like so:

//templates/application.hbs
<button class="btn btn-primary" {{action 'solisXTax'}}> Consul</button>
<hr/>
{{#if componentVisible}}
    {{ember-chart}}
{{else}}
    no component shown
{{/if}}

with the corresponding action in your controller

//controllers/application.js
export default Ember.Controller.extend({
  componentVisible: false,
  actions:{ 
    solisXTax(){ 
      this.toggleProperty('componentVisible')
    }
  }
});

Here is a twiddle that showcases using an if statement to toggle your component.

You could also dynamically toggle between different components, where one could be a empty component, but that might be overkill for your use case.