app.component.ts

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  @ViewChild('dropZone', { static: true }) dropZone: ElementRef<HTMLDivElement>;

  dragEnter$ = defer(() => fromEvent(this.dropZone.nativeElement, 'dragenter')).pipe(
    tap((event: any) => { event.target.style.background = 'teal'; event.target.style.opacity = .5; })
  );

  dragExit$ = defer(() => fromEvent(this.dropZone.nativeElement, 'dragleave')).pipe(
    tap((event: any) => { event.target.style.background = ''; event.target.style.opacity = 1; })
  );

  dragEnd$ = defer(() => fromEvent(this.dropZone.nativeElement, 'dragend')).pipe(
    tap((event: any) => event.target.style.background = '')
  );
  
  ngOnInit() {
    this.dragEnter$.subscribe();
    this.dragEnd$.subscribe();
    this.dragExit$.subscribe();
  }
}