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](https://docs.angularjs.org/guide/directive). — LJ.Wizard, Feb 28 '16 at 11:42
@LJ.Wizard I don't wish to manipulate DOM. Below I posted a solution. — Amio.io, Feb 28 '16 at 13:29
what the heck is a MarkerController ? is it the same as MyController? — MartianMartian, Aug 26 '16 at 07:30

Amio.io · Accepted Answer · 2017-02-03T11:58:10.597

16

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 03 '17 at 11:58

answered Feb 28 '16 at 13:29

Amio.io

20,677
15
82
117

Zatziky, So you're not attempting to pass the object anymore? Rather you're passing a string to the component? Is my understanding correct? – Michael R Jun 20 '16 at 23:35
@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. – Amio.io Jun 21 '16 at 06:50
1

Note that key attribute must be in kebab-case. Example: if you want your key to be myProperty then attribute must be my-property. – Eduard Kolosovskyi Mar 28 '17 at 08:59
@EdKolosovskiy The example I posted was working at the time of the writing. Isn't it working anymore? – Amio.io Mar 28 '17 at 11:47
Just try this this.$onInit = function(){ console.log(this.myObject); } Your problem will solve. – yasir_mughal May 23 '18 at 08:46
@Amio.io are you sure this still works? I have tried everything, the {{}} and the $ctrl, < and = , no ball – Nov 19 '19 at 10:48
@Sam As far as I can remember, it was working in Angular 1.6. Quite archaic version, right? ;-) – Amio.io Nov 19 '19 at 17:01

Pass object to component

1 Answers1

Linked