CODEWITHSUNDEEP
angularjstypescriptangularjs-components
Slava
Slava

Reputation: 6640

What is wrong with my Typescript AngularJS 1.5 component?

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:

<date-time value="vm.woComplete.CompleteDate"></date-time>

where vm.woComplete.CompleteDate is the date property of my data model.

TypeScript code for this component is this:

namespace AppDomain {
    "use strict";

    export class DateTimeComponent {

        require: string = "ngModel";
        bindings: any = { value: "=" };
        template: string = "<input type='date' ng-model='$ctrl.displayValue'><input type='time' ng-model='$ctrl.displayValue'></p>";

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

}

But I don't get any output. What am I doing wrong?

I want to have proper TypeScript code with $onInit and $onChangesinstead of $scope.$watch.

Here is the example, just need to convert it TypeScript!

http://plnkr.co/edit/D9Oi6le7G9i3hNC2yvqy?p=preview

Upvotes: 0

Views: 503

Answers (1)

Cyril Gandon
Cyril Gandon

Reputation: 17048

You use a syntax I have never seen, and what is DetailController?
Try with this syntax instead:

export class Controller {
    value: number;
    displayValue: Date;

    $onInit() {
        this.displayValue = new Date(this.value);
        this.displayValue.setHours(this.displayValue.getHours() - 4);
    };

    $onChanges() {
        const tmpDate = new Date(this.displayValue);
        this.value = tmpDate.setHours(tmpDate.getHours() + 4);
    };
}
const component : angular.IComponentOptions = {
    controller : Controller,
    bindings: { value: "=" },
    template: `
        <p><label>Date:</label><br>
        <input type='date' ng-model='$ctrl.displayValue'></p>
        <p><label>Time:</label><br>
        <input type='time' ng-model='$ctrl.displayValue'></p>`

};
app.component("dateTime", component);

Upvotes: 1

Related Questions