Skip to main content

[SOLVED] Angularjs components – How to pass-in arguments in callbacks

It’s pretty straightforward but not very clear in the documentation, so how do you pass-in arguments in a callback in an Angular component? In your Angular component you have to bind your callback with ‘&’ and return an object with the passed-in name as key:


<my-component callback="$ctrl.callback(keyName)"></my-component>


<button ng-click="${'foo':'bar'})">Pass object to callback</button>


    .controller('myController', MyController)
    .component('myComponent', {
        templateUrl: '/Angular-template.html',
        controller: 'myController',
        bindings: {
           callback: '&'

function MyController() {
   var $ctrl = this;
   $ = function (data) {

The important part is of course the ‘&’ binding but also the key name marked with bold in the example.

2 thoughts to “[SOLVED] Angularjs components – How to pass-in arguments in callbacks”

Leave a Reply

Your email address will not be published.