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.

If your intention is to manipulate your DOM, then yes, you should be using a custom directive. — LJ.Wizard
– LJ.Wizard, Commented Feb 28, 2016 at 11:42
@LJ.Wizard I don't wish to manipulate DOM. Below I posted a solution. — Amio.io
– Amio.io, Commented Feb 28, 2016 at 13:29
what the heck is a MarkerController ? is it the same as MyController? — MartianMartian
– MartianMartian, Commented Aug 26, 2016 at 7:30

Amio.io · Accepted Answer · 2017-02-03 11:58:10Z

17

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;
}

edited Feb 3, 2017 at 11:58

answered Feb 28, 2016 at 13:29

Amio.io

21.7k15 gold badges88 silver badges119 bronze badges

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

7 Comments

Michael R Over a year ago

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 Over a year ago

@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.

Eduard Kolosovskyi Over a year ago

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 Over a year ago

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

yasir_mughal Over a year ago

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

|

Collectives™ on Stack Overflow

Pass object to component

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related