How to pass an action from template controller to Grand child component

I am quiet new Ember frame work. I am trying to pass an “action” from the controller to the grandchild component of the current template. But it fails for some reason. Could anyone let me know what am I missing here.

MainTemplate's Router Controller

export default class MainTemplateController extends Controller {

      field = "userId";

      save () {
        //save data


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

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

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

export default class GrandChildComponent extends Component {    
    doSomething(fieldName) {
        console.log(fieldName); // logs as "userId"
        console.log( // undefined

I think your problem is this line:

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

It should look like this instead:

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


Would this console still have to be OR can be ?

It has to be in a Glimmer component, but can be either in an Ember component. This is one the critical differences between the two. In a template, you should always prefer @save when referencing an argument passed in because it works correctly across both, as well as making the template clearer.

Thank you Chris. That worked.

1 Like