How to pass an "action" from a template to it's grand child components in Ember Octane

Question

I am trying to pass an "action" from the controller to the grandchild component of the current template. But it fails for somereason. Could anyone let me know what am I missing here.

MainTemplate's Router Controller

export default class MainTemplateController extends Controller {

  field = "userId";

  @action
  save () {
    //save data
  }

}

MainTemplate.hbs

<ChildComponent @field={{this.field}} @save={{this.save}} /> 


ChildComponent.hbs 

<GrandChildComponent @field={{this.field}} @save={{this.save}} />


GrandChildComponent.hbs

<button @onClick={{action "doSomething" (readonly @field)}}>Save</button>

export default class GrandChildComponent extends Component {    
    @action
    doSomething(fieldName) {
        console.log(fieldName); // logs as "userId"
        console.log(this.args.save) // undefined
    }    
}

Answer 1

Your code looks fine. There is a small @argument issue in your ChildComponent.hbs file.

Since you are passing the argument from the MainTemplate (save and field) to GrandChildComponent via ChildComponent. The GrandChildComponent invocation should be something like,

<!-- ChildComponent.hbs  -->

<GrandChildComponent @field={{@field}} @save={{@save}} />

as these two properties are argument to the ChildComponent component and it's not owning them. Hope this solves your issue and this cheat sheet helped me to understand octane better :)