title: Angular 4 @HostBinding('attr.id') does not work (undefined)
body: <p>I have difficulties binding to host element 'id' attribute in my select-picker directive. I am using <code>@HostBinding('attr.id')</code>, but it returns <code>undefined</code>. I have checked the actual DOC and it looks like this is the way this simple task should be done. </p>
  
  <p><strong>Here is my component</strong>:</p>
  
  <pre><code>import {Component, OnInit, Input, Output, EventEmitter, AfterViewInit, HostBinding} from '@angular/core';
  declare const $;
  
  @Component({
      selector: '[select-picker]',
      templateUrl: 'select-picker.component.html'
  })
  
  export class SelectPickerComponent implements OnInit, AfterViewInit {
  
      @Input() options: Array&lt;Object&gt;;
      @Input() @HostBinding('class.cancelable') cancelable: boolean;
      @Input() @HostBinding('class.expand-up') expandUp: boolean;
      @Input() @HostBinding('style.width') elemWidth: string;
      @HostBinding('attr.id') id: string;
  
      @Output() value: EventEmitter&lt;boolean&gt; = new EventEmitter&lt;boolean&gt;();
  
      select: any;
  
      constructor() {
      }
  
      ngOnInit() {
          console.log(this.id) // &lt;-- this logs 'undefined';
      }
  
      ngAfterViewInit() {
          const self = this;
          this.select = $(`#${this.id} select`).selectize({ // this init works, but with `id="undefined"`
              readOnly: true,
              onChange: function (val) {
                  self.value.emit(val);
              },
              dropdownDirection: 'up'
          });
      }
  
      discardValue() {
          this.select[0].selectize.setValue(0);
      }
  }
  </code></pre>
  
  <p><strong>And this is the view (from parent component where directive is used):</strong></p>
  
  <pre><code>&lt;div select-picker id="page-options" [options]="pageOptions" [elemWidth]="'200px'" (value)="setItemsPerPage($event)"&gt;&lt;/div&gt;
  </code></pre>