accessing angular component parameters in the component's controller

Question

I am having a problem accessing component parameters in the component's controller.

(function() {
'use strict';

angular.module('myapp')
    .component('myComponent', {
        bindings: {
            name: '='
        },
        template: `<div>{{$ctrl.name}}</div>`,
        controller: function () {
            console.log(this.name); //displays undefined
        }
    });
}());

<my-component name="'mytest'"></my-component>

This outputs "mytest" on the page, so the {{$ctrl.name}} inside the template does work. However, I am getting 'undefined' when I try to console.log the variable in the controller.

Thanks

Answer 1

I was able to solve this by adding a $doCheck hook to the component's controller

angular.module('myapp')
    .component('myComponent', {
        bindings: {
            name: '='
        },
        template: `<div>{{$ctrl.name}}</div>`,
        controller: function () {
            console.log(this.name); //displays undefined

            this.$doCheck = function() {
                console.log(this.name); //works
            };
        }
    });
}());