Passing a parameter through output binding AngularJS

Question

I'm having to following setup with AngularJs 1.5.8, using Typescript:

I have a parent component which contains a catalog (2D array of items). From where I pass each list in the catalog to a child component:

...
export class ParentController {

    private catalog = []; //contains a list of lists

    ...

    private printCallback(item: any): void {
        console.log(item);
    }
}

and the template:

<div ng-repeat="list in $ctrl.catalog">
    <child content="list" callback="$ctrl.printCallback(item)"></child>
</div>

Now in the child component I iterate again over every item in the list. And whenever I click on an item from the list, I want the parent to know the item I clicked on:

export class ChildComponent implements IComponentOptions {
template: any = require('./child.component.html');
public bindings: any = {
    content: '<',
    callback: '&'
};
controller: any = ChildController;
}

export class ChildController {

    public content: Array<any>;
    public callback;

    ...

    public onTrigger(item: any): void {
        this.callback(item);
    }
}

And the child template:

<div ng-repeat"item in $ctrl.content">
    <button ng-click="$ctrl.onTrigger(item)">{{item.name}}</button>
</div>

Now I can't seem to print the item in the printCallBack() of my parent component. I don't know exactly what I'm doing wrong cause the only thing that's printing is undefined. I've looked around and couldn't find a working solution. So I hope you can help me.

@anoop Well that just made my day. I knew it was in the details, but I couldn't lay my finger on it. You gonna make an answer so I can accept it? — Tomato
– Tomato, Commented Jun 23, 2017 at 9:27

anoop · Accepted Answer · 2017-06-23 09:30:21Z

5

While callback, do it like: this.callback({item : item});, pass as object.

answered Jun 23, 2017 at 9:30

anoop

3,8222 gold badges18 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Passing a parameter through output binding AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related