Search code examples
ember.jsember-components

How to make a component for modal box in emberjs?


I want to make a component which generates any number of buttons passed to it. Now, the questions is how to pass the data about the button from template to component, so that the specified action will get called on click of the corresponding button.


Solution

  • You can pass buttons as array. Here is an example of how to render them. In component's template:

    {{#each buttons as |button|}}
        <button type="button"
                class="{{button.className}} button"
                    onclick={{action button.action}}>
           {{button.text}}
        </button>
    {{/each}}
    

    Then, somewhere in template where you want to use your component:

    {{your-component buttons=(array (className='green' text='Save' action=(action (mut variable) 'value')))}}
    

    array helper is a part of ember-composable-helper