AngularJS bindings with Typescript and ng.IComponentController

Question

I'm using webpack with Babel and Typescript

I have this controller:

// HelloWorldController.ts

class HelloWorldController implements ng.IComponentController {

constructor(private $scope: ng.IScope) {
}

public over(): void {
    this.$scope.color = this.change();
}
}

and his component options

export class HelloWorldComponent implements ng.IComponentOptions {

public bindings: {[binding: string]: string};
public controller: Function;
public templateUrl: string;

public constructor() {
    this.bindings = {
        color: '=',
        change: "&"
    };
    this.controller = HelloWorldController;
    this.templateUrl = "HelloWorld.html";
    }
}
app.component('helloWorld', new HelloWorldComponent());

When I transpile this code I got this error:

error TS2339: Property 'change' does not exist on type 'HelloWorldController'

How I can access the bindings reference inside a controller with Typescript?

Mobiletainment · Accepted Answer · 2016-08-29 21:27:26Z

2

You need to declare the bound variables on your Controller:

// HelloWorldController.ts
class HelloWorldController implements ng.IComponentController {

    change: () => any;
    color: any;

    public over(): void {
        this.color = this.change();
    }
}

This way, you tell TypeScript about the existence of these properties on your controller.

Note that during initialization of your component controller, Angular will apply the bindings you've set in your component options (color: '=', change: "&") and set your controller's variables to their bound values. This means that you don't have to access these bindings through $scope anymore (as done in the over method), which completely elliminates the need to inject $scope into your controller and vastly increases reusability of your code.

answered Aug 29, 2016 at 21:27

Mobiletainment

23.5k9 gold badges91 silver badges102 bronze badges

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

Collectives™ on Stack Overflow

AngularJS bindings with Typescript and ng.IComponentController

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related