Why are my component bindings undefined in its controller?
<p>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.</p>

<p>Component:</p>

<pre><code>var app = angular.module("test", []);
app.component("test", {
  bindings: {
    "contactId": "&lt;"
  },
  controllerAs: "model",
  controller: () =&gt; {
    //output: 'contact id from controller: undefined'
    console.log(`contact id from controller: ${this.contactId}`);
  },
  template: "&lt;div&gt;Contact id from view: {{model.contactId}}&lt;/div&gt;"
});
</code></pre>

<p>Html:</p>

<pre><code>&lt;test contact-id="8"&gt;&lt;/test&gt;
</code></pre>

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

<p>What am I doing wrong?</p>

<p>Here's a <a href="https://plnkr.co/edit/0GUoNqLRyygeRlqItSMV?p=preview" rel="noreferrer">plnkr</a> illustrating the problem.</p>