Drag and Drop event using angular4 is not working in IE11

I am using a directive to get the files when it is dropped on the HTML element, it is working fine in chrome but it is not working in IE11.

the following is the code for the drag and drop event import { Directive, HostListener, Output, EventEmitter } from '@angular/core';

@Directive({
  selector: '[appDragDrop]'
})
export class DragDropDirective {

  constructor() { }
  @Output()
  FileDragEvent: EventEmitter<File> = new EventEmitter<File>();

  @HostListener('window:drop', ['$event']) public onDrop(event) {

    event.preventDefault();
    event.stopPropagation();
    if (event.dataTransfer.items[0].type != 'application/vnd.ms-excel') {
      return false;
    }
    let files = event.dataTransfer.files;
    this.FileDragEvent.emit(files);
  }
  @HostListener('window:dragover', ['$event']) public onDragOver(evt) {
    evt.preventDefault();
    evt.stopPropagation();

  }

  @HostListener('window:dragleave', ['$event']) public onDragLeave(evt) {
    evt.preventDefault();
    evt.stopPropagation();

  }
}

intially i was just using like this for the @hostlistener