@Directive({

    selector: '[appDroppable][dropTags][dragEnterClass]'

})

export class DropDirective {

@Output() dropped = new EventEmitter<DragData>();

@Input() dragEnterClass: string;

@Input() dropTags: string[] = [];

private data$;

constructor(

    private el: ElementRef,

    private rd: Renderer2,

    private service: DragDropService

) {

    // console.log('this.service.getDragData(): ', this.service.getDragData().take(1));

    this.data$ = this.service.getDragData().take(1);

}

@HostListener('dragenter', ['$event'])

onDragEnter(ev: Event) {

    ev.preventDefault();

    ev.stopPropagation();

    if (this.el.nativeElement === ev.target) {

        this.data$.subscribe(dragData => {

            console.log(dragData); // print: null

            if (this.dropTags.indexOf(dragData.tag) > -1) {

                this.rd.addClass(this.el.nativeElement, this.dragEnterClass);

            }

        });

    }

}

github: https://github.com/LeMueller/angular_task_manager