Ember 3+ passing action from component to controller not working

Question

We have recently shifted from ember 2+ to Ember 3.18.0 and i am struggling to call the controller function from a component. In previous version we were using sendAction to bubble the action but now as sendAction is depreciated and closures are being used i am not able to make it correctly.

Below is my code

Controller.hbs

{{generic-err-modal err=receivedErr showDialog= this.showErrorModal onSave=(action "closePromptDialog")}}

Controller.js

@action
closePromptDialog(){
    this.set("showErrorModal",false);
}

Component.hbs

    {{#if @showDialog}}
  <PaperDialog id="genericModal" class="flex-50" @fullscreen={{fullscreen}} @onClose={{action "closePromptDialog"}} @origin={{dialogOrigin}}>
      <PaperDialogContent class="text-align-center">
          {{paper-icon "remove_circle_outline" class="red" size=48}}
      </PaperDialogContent>
      <PaperDialogContent>
        <h2>{{@err.errorMessage}}</h2>
      </PaperDialogContent>

      <PaperDialogActions @class="layout-row">
        <span class="flex"></span>
        <PaperButton @primary={{true}} @onClick={{action "hideModal"}} @raised={{true}}>Ok</PaperButton>
      </PaperDialogActions>

  </PaperDialog>
{{/if}}

Component.js

@action
hideModal(){
    this.args.onSave();
}

on this i am getting error as

Uncaught TypeError: method is not a function

Any help will be very much appreciated.

Ember version i am using is 3.18.0

Gokul Kathirvel Gokul Kathirvel · Accepted Answer · 2020-06-23T08:01:19

From Octane edition, everything becomes more explicit in Ember 😃 One such thing is the {{action}} helper to pass functions. In classic (pre-octane) model, when passing a string to the action helper like, {{action "closePromptDialog"}}, Ember will search for the action closePromptDialog inside the actions hash of the corresponding controller as mentioned in the example in the guide.

Since the introduction of native class and @action decorator, we don't have to use the {{action}} helper as well as actions hash. We can directly pass the method to the component without action helper as mentioned in the guides of 3.18. So,

Controller.hbs:

{{generic-err-modal 
  err=receivedErr   
  showDialog=this.showErrorModal 
  onSave=this.closePromptDialog
}}

Here, this.closePromptDialog will directly refer to the method in the backing class similar to any other class property like, receivedErr, in your case. The proper this binding will be taken care of by the @action decorator. The same is applicable for your actions inside Component.hbs file.

Ember 3+ passing action from component to controller not working

1 Answers