title: Using Angular @HostBinding inside directive to set and update attribute values on host
body: <p>So, let's say I have the following directive:</p>
  
  <pre><code>&lt;div foo&gt;&lt;/div&gt;
  
  import { Directive, HostBinding } from '@angular/core';
  
  @Directive({
      selector: '[foo]'
  });
  
  export class FooDirective {
      x: number;
  
      constructor() {
          this.x = 100;
      }
  
      @HostBinding('style.left.px')
      styleLeftPx: number = this.x;
  }
  </code></pre>
  
  <p>If I render this as is, it appears not to work because <code>this.x</code> gets its value <em>after</em> <code>@HostBinding</code> has initialized.</p>
  
  <p>So, changing the above to something more like this:</p>
  
  <pre><code>...
  
  x: number = 100;
  
  constructor() {}
  
  ...
  </code></pre>
  
  <p>And setting that value outside of the constructor, the value is added with no issue. </p>
  
  <p>However, if I try to change that value at any point, for example with a timeout:</p>
  
  <pre><code>...
  
  x: number = 100;
  
  constructor () {
      setTimeout(() =&gt; {
          this.x = 200;
      }, 2000)
  }
  
  ...
  </code></pre>
  
  <p>The host attribute does not update to the new value. Is there no data binding going on here after the initial init? There are lots of answers here on stack discussing how to set the initial value of an attr using <code>@HostBinding</code>, but what about changing that value after init?</p>