I'm writing a simple angular component. I'm passing a parameter as a binding and display its value on the screen. All works fine: I can see the parameter being displayed on the screen.

Component:

var app = angular.module(test, []);

app.component(test, {

  bindings: {

    contactId: <

  },

  controllerAs: model,

  controller: () => {

    //output: 'contact id from controller: undefined'

    console.log(`contact id from controller: ${this.contactId}`);

  },

  template: <div>Contact id from view: {{model.contactId}}</div>

});

Html:

<test contact-id=8></test>

However, when I try to access the binding from within the controller (see the console.log), the binding value is undefined. I don't understand how it can be available in the view, but not in the controller.

What am I doing wrong?

Here's a plnkr illustrating the problem.