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.

Karmenkarna

If your intention is to manipulate your DOM, then yes, you should be using a custom directive. – Dett

@Dett I don't wish to manipulate DOM. Below I posted a solution. – Karmenkarna

what the heck is a MarkerController ? is it the same as MyController? – Lobeline

@Matian2040 yes, I've corrected it. – Karmenkarna

Answer 1

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

Karmenkarna

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

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

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

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

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

@Karmenkarna are you sure this still works? I have tried everything, the {{}} and the $ctrl, < and = , no ball – Jaredjarek

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