When using @HostBinding in conjunction with Chrome's Drag and Drop API, the code looks like this:
@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 => this.onDragStart(<DragEvent> e));
Observable.fromEvent(this.el, 'drop').subscribe(e => this.onDrop(<DragEvent> e));
}
onDragStart(event: DragEvent) {
this.isDraggedArticle = true;
}
onDrop(event: DragEvent) {
event.preventDefault();
this.isDraggedArticle = false;
}
}
However, there seems to be an issue where the isDraggedArticle class is not always removed from the element. Attempts were made by adding
this.ref.detectChanges();
this.appRef.tick();
to the onDrop method (where ref represents a ChangeDetectorRef and appRef represents an ApplicationRef), but unfortunately, it did not resolve the problem.