title: Angular 2 does not detect changes for @HostBinding
body: <p>I use <code>@HostBinding</code> to set a class together with Chrome's Drag and Drop API like this:</p>
  
  <pre><code>@Directive({ selector: '[sortable-article]' })
  export class SortableArticleComponent {
  
      @HostBinding('class.dragged-element')
      isDraggedArticle: boolean = false;
  
      constructor(elRef: ElementRef, private ref: ChangeDetectorRef, private appRef: ApplicationRef, private dndService: ArticleDndService) {
          this.el = elRef.nativeElement;
          Observable.fromEvent(this.el, 'dragstart').subscribe(e =&gt; this.onDragStart(&lt;DragEvent&gt; e));
          Observable.fromEvent(this.el, 'drop').subscribe(e =&gt; this.onDrop(&lt;DragEvent&gt; e));
      }
  
      onDragStart(event: DragEvent) {
          this.isDraggedArticle = true;
      }
  
      onDrop(event: DragEvent) {
          event.preventDefault();
          this.isDraggedArticle = false;
      }
  }
  </code></pre>
  
  <p>What happens is that more times then not, the <code>isDraggedArticle</code> class does not get removed from the element and I don't know why. I tried adding </p>
  
  <pre><code>this.ref.detectChanges();
  this.appRef.tick();
  </code></pre>
  
  <p>to the onDrop method (where <code>ref</code> is a <code>ChangeDetectorRef</code> and <code>appRef</code> is an <code>ApplicationRef</code>), but it does not help.</p>