What is wrong with my Typescript AngularJS 1.5 component?

Question

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

Do you have the JavaScript this file produces linked in your HTML file? — Heretic Monkey
– Heretic Monkey, Commented Oct 21, 2016 at 20:16

Cyril Gandon · Accepted Answer · 2016-10-21 19:59:15Z

1

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

edited Oct 21, 2016 at 19:59

answered Oct 21, 2016 at 19:15

Cyril Gandon

17.1k15 gold badges84 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Slava Over a year ago

Thanks, I updated my code and this post with your fix, but it still doesnt show, component script is attached, but when I add alert('bla bla bla') inside $onInit(), I dont get a popup, so it is not being called

Cyril Gandon Over a year ago

@monstro: I have change my answer

Slava Over a year ago

Yes, thanks, I am just confused about how to implement angular component in typescript... ;(

Cyril Gandon Over a year ago

I have add some type annotations to be more TypeScript, but basically, that's it!

Collectives™ on Stack Overflow

What is wrong with my Typescript AngularJS 1.5 component?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related