Pass object to component

Question

I have created a component that needs to have a reference to the object for which the component was created. I didn't make to work and all my trials have failed. Below, I try to describe the intention.

The component definition would maybe look like this:

angular
    .module('myModule')
    .component('myComponent', {
        templateUrl: "template.html",
        controller: [
            MyController
        ],
        bindings: {
            myObject: '='
        }
    });

function MyController(myObject) {
    var vm = this;

    vm.myObject = myObject;
}

In a service I would like to create my object like this:

function createMyObject(args) {
        var myObject = {some: data};

        myObject.ref = "<my-component myObject='{{myObject}}'></my-component>";
        return myObject;
    }

Question

How can I pass data to angular component tag? Do I have to switch back to a component directive to make it work?

Any ideas are greatly appreciated. Thank you.

Solution

Solution 1

In your template:

<my-component key='$ctrl.myObject'></my-component>

In code:

angular
    .module('myModule')
    .component('myComponent', {
        templateUrl: "template.html",
        controller: [
            'objectService'
            MyController
        ],
        bindings: {
            key: '=' // or key: '<' it depends on what binding you need
        }
    });

function MyController(myObject, objectService) {
    var vm = this;

    vm.myObject.whatever(); // myObject is assigned to 'this' automatically
}

Solution 2 - via Component Bindings

Component:

angular
.module('myModule')
.component('myComponent', {
    templateUrl: "template.html",
    controller: [
        'objectService'
        MyController
    ],
    bindings: {
        key: '@'
    }
});
function MyController(myObject, objectService) {
    var vm = this;

    vm.myObject = objectService.find(vm.key);
}

Usage:

function createMyObject(args) {
    var myObject = {key: ..., some: data};

    myObject.ref = "<my-component key='" + myObject.key + "'></my-component>";
    return myObject;
}

Comments

[Michael R]

Zatziky, So you're not attempting to pass the object anymore? Rather you're passing a string to the component? Is my understanding correct?

[Amio.io]

@MichaelR It's been some while but generally the example in the question works but with a slight modification. Instead of myObject='{{myObject}}' you would use controller myObject='$ctrl.myObject'. The workaround in the answer is just a hack. I have modified the answer accordingly.

[Ed Kolosovsky]

Note that key attribute must be in kebab-case. Example: if you want your key to be myProperty then attribute must be my-property.

[Amio.io]

@EdKolosovskiy The example I posted was working at the time of the writing. Isn't it working anymore?

[yasir_mughal]

Just try this this.$onInit = function(){ console.log(this.myObject); } Your problem will solve.

[Admin]

@Amio.io are you sure this still works? I have tried everything, the {{}} and the $ctrl, < and = , no ball

[Amio.io]

@Sam As far as I can remember, it was working in Angular 1.6. Quite archaic version, right? ;-)