title: What is wrong with my Typescript AngularJS 1.5 component?
body: <p>I need a custom AngularJS 1.5x component (in TypeScript!) for entering a date and time, that will have some required time zone correction logic, like this:</p>
  
  <pre><code>&lt;date-time value="vm.woComplete.CompleteDate"&gt;&lt;/date-time&gt;
  </code></pre>
  
  <p>where <code>vm.woComplete.CompleteDate</code> is the date property of my data model.</p>
  
  <p>TypeScript code for this component is this:</p>
  
  <pre><code>namespace AppDomain {
      "use strict";
  
      export class DateTimeComponent {
  
          require: string = "ngModel";
          bindings: any = { value: "=" };
          template: string = "&lt;input type='date' ng-model='$ctrl.displayValue'&gt;&lt;input type='time' ng-model='$ctrl.displayValue'&gt;&lt;/p&gt;";
  
          controller: Function = function ($scope) {
              var ctrl = this;
  
              ctrl.$onInit = function () {
                  console.log(arguments);
                  ctrl.displayValue = new Date(ctrl.value);
                  ctrl.displayValue.setHours(ctrl.displayValue.getHours() - 4);
              }
  
              $scope.$watch('$ctrl.displayValue', function () {
                  var tmpDate = new Date(ctrl.displayValue);
                  ctrl.value = tmpDate.setHours(tmpDate.getHours() + 4);
              });
          }
  
      }
  
      app.component("dateTime", DateTimeComponent);
  
  }
  </code></pre>
  
  <p><strong>But I don't get any output. What am I doing wrong?</strong></p>
  
  <p>I want to have proper TypeScript code with <code>$onInit</code> and <code>$onChanges</code>instead of <code>$scope.$watch</code>.</p>
  
  <p>Here is the example, just need to convert it TypeScript!</p>
  
  <p><a href="http://plnkr.co/edit/D9Oi6le7G9i3hNC2yvqy?p=preview" rel="nofollow">http://plnkr.co/edit/D9Oi6le7G9i3hNC2yvqy?p=preview</a></p>