How to communicate nested component to mixin without using service

Question

I have a nested component. The child-component has an input field bind with mixin variable and action, In parent-component had button action. ( without mixin because parent-component considered as a addon ) while button action triggers the child-component value update to the mixin variable. How trigger a child action from parent-component.

Note: Please refer the attached demo link

https://ember-twiddle.com/d8b01ba563b555fc01374f300db20c5b?openFiles=components.child-component.js%2C

Remi Smirra Remi Smirra · Accepted Answer · 2016-04-21T10:17:57

An easier approach than triggering actions on your child-component would be to pass the updated_val down to the child component, and let the ember value-binding do the rest. When the value has changed and you click update, make your ajax call from your dialog-component.

e.g. for passing your updated_val down

//application.hbs
{{dialog-component updated_val=updated_val}}

But since your question was "How to trigger actions on a child component", this might be an approach (see updated twiddle):

//dialog-component.js
import Ember from 'ember';

export default Ember.Component.extend( {

  actionCalled: false,
  actions:{ 

    callChildAction() {
      this.toggleProperty( 'actionCalled' );
    },

    updateValue(updateVal) {
      this.set('updated_val', updateVal);
    }  
  }

});

//dialog-component.hbs
<div class='dialog'>

  {{!pass your 'updateValue' action from the dialog-component to the child-component}}
  {{ child-component actionCalled=actionCalled updateValue=(action 'updateValue')}}

  <button {{action 'callChildAction' }}> Update </button>

</div>

//child-component.js
import Ember from 'ember';

export default Ember.Component.extend( {

  child_val: '',

  actionObserver: Ember.observer('actionCalled', function(){
    this.send('childAction')
  }),

  actions:{

    childAction(){
        alert( 'childAction called..' );

        // some validation and ajax call.      
        this.sendAction('updateValue', this.get('child_val'));     
     },   
  }

});

//child-component.hbs
{{input value=child_val}}

How to communicate nested component to mixin without using service

1 Answers