Angular 1.5 component in Typescript not passing binding variable string

Question

I am using Typescript with angular 1.5. I am having an issue passing a variable to a component to a binding.

Here is the relevant code - I've stripped out most of the non-relevant code.

module xyz.dashboard {

class PatientPhaseCountController {

    public static $inject = [];

    public title: string;

    public chartType: string;

    ///// /* @ngInject */
    constructor() {
        this.title = 'Patient Phase Count';

        console.log(this.chartType);
        this.$onInit();
    }

    public $onInit(): void {
        console.log(this);
    };

}

class PatientPhaseCount implements ng.IComponentOptions {
    public bindings: any;
    public controller: any;
    public templateUrl: string;

    constructor() {
        this.bindings = {
            chartType: '@'
        };
        this.controller = PatientPhaseCountController;
        this.templateUrl = 'app/dashboard/patientPhaseCount/patientPhaseCount.component.html';
    }
}

}

and here's the html snippet:

chartType is always undefined. Any help is appreciated.

Answer 1

I had a similar problem, and my solution to this was to inject a $scope service into controller class. The $scope contains a controller, which by default called $ctrl, and within $ctrl you can find your bindings. So, for your case a solution would be like this

    module xyz.dashboard {
      class PatientPhaseCountController {
         public static $inject = [];
         public title: string;
         public chartType: string;
         ///// /* @ngInject */
         constructor(private $scope:any) {
           this.title = 'Patient Phase Count';
           console.log(this.$scope.$ctrl.chartType);
           this.$onInit();
         }
         public $onInit(): void {
           console.log(this);
         };
       }

        class PatientPhaseCount implements ng.IComponentOptions {
        public bindings: any;
        public controller: any;
        public templateUrl: string;
        constructor() {
            this.bindings = {
                chartType: '@'
            };
            this.controller = ["$scope",($scope:any)=>{
               return new PatientPhaseCountController($scope);
            };
            this.templateUrl = 'app/dashboard/patientPhaseCount/patientPhaseCount.component.html';
        }  
      }
    }