Angular 1 and TypeScript not binding to variable

Question

I've got the following code, where I expect the content of the property variable to be displayed in the page. I read a couple of posts and tried to find out what I'm doing wrong, but couldn't find the error. Here is the code:

namespace testWeb.about {
    class AboutComponent implements ng.IComponentOptions {
        templateUrl = "scripts/components/about/about.html";
        controller = AboutController;
        bindings: any;

        constructor() {
            this.bindings = {
                awesomeThings : '<',
                property : '<'
            };
        }
    }

    interface IAboutController {
        awesomeThings: Array<string>;
        property: string;
    }

    export class AboutController implements IAboutController, ng.IComponentController {
        awesomeThings: Array<string>;
        property: string;

        constructor() {
            this.awesomeThings = [
                "one",
                "two",
                "three"
            ];
            this.property = "123";
        }
    }
    angular.module("test_web")
        .component("about", new AboutComponent())
        .config(($stateProvider) => {
            "ngInject";
            $stateProvider
                .state("about", {
                    url: "/about",
                    template: `<about></about>`
                });
        });
}

Whether <span ng-repeat="dd in $ctrl.awesomeThings">{{dd}}</span> nor <span class="as">{{$ctrl.property}}</span> gets displayed.

<span ng-repeat="dd in $ctrl.awesomeThings">{{dd}}</span>
<span class="as">{{$ctrl.property}}</span>
<p>123</p>

Estus Flask · Accepted Answer · 2017-04-18 14:46:07Z

1

This behaviour is caused by disabled pre-assigned bindings in Angular 1.6.

In 1.5, this.property = "123" overwrites initial binding value, even if it was provided.

In 1.6, the binding is assigned after constructor call. If a value for the binding is not provided, property is assigned to undefined.

To prevent this and provide the desired behaviour bindings should be marked as optional:

this.bindings = {
    awesomeThings : '<?',
    property : '<?'
};

Alternatively, initial values can be assigned in $onInit hook, this allows to ignore falsy initial values from bindings for example:

constructor() {}

$onInit() {
    this.awesomeThings = this.awesomeThings || [
        "one",
        "two",
        "three"
    ];
    this.property = this.property || "123";
}

answered Apr 18, 2017 at 14:46

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

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

2 Comments

N.Zukowski Over a year ago

Should I use $onInit when optional bindings not working? Trying to create some dynamic menu with ng-repeat in the initial component, but cannot get it work.

Estus Flask Over a year ago

Yes, this is how it is supposed to work, all initialization code goes to $onInit (which is an an alternative to directive pre-link function), unless it is known that code should be in constructor. For legacy components that are not ready for 1.6 see also toddmotto.com/angular-1-6-is-here#re-enabling-auto-bindings . ng-repeat has weird timing, so if the problem persists even with $onInit, it may be specific to ng-repeat .

Collectives™ on Stack Overflow

Angular 1 and TypeScript not binding to variable

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related