title: Angular 4 drag and drop
body: <p>I have a problem with Angular drag and drop. I created a component and a directive for it. I tried two solutions, this is the first:</p>
  
  <pre><code>@HostListener('drop', ['$event']) public onDrop(evt) {
          evt.preventDefault();
          evt.stopPropagation();
          this.background = '#eee';
          let files = evt.dataTransfer.files;
          let valid_files: Array&lt;File&gt; = [];
          let invalid_files: Array&lt;File&gt; = [];
          if (files.length &gt; 0) {
              files.forEach((file: File) =&gt; {
                  let ext = file.name.split('.')[file.name.split('.').length - 1];
                  if (this.allowed_extensions.lastIndexOf(ext) !== -1) {
                      valid_files.push(file);
                  } else {
                      invalid_files.push(file);
                  }
              });
              this.filesChangeEmiter.emit(valid_files);
              this.filesInvalidEmiter.emit(invalid_files);
          }
      }
  </code></pre>
  
  <p>I got an error message when I drop the image to the browser.</p>
  
  <blockquote>
    <p>files.forEach is not a function</p>
  </blockquote>
  
  <p>And I tried a different forEach like this:</p>
  
  <pre><code>import { forEach } from '@angular/router/src/utils/collection';
  
  @HostListener('drop', ['$event']) public onDrop(evt) {
          evt.preventDefault();
          evt.stopPropagation();
          this.background = '#eee';
          let files = evt.dataTransfer.files;
          let valid_files: Array&lt;File&gt; = [];
          let invalid_files: Array&lt;File&gt; = [];
          if (files.length &gt; 0) {
             forEach(files, (file: File) =&gt; {
                  let ext = file.name.split('.')[file.name.split('.').length - 1];
                  if (this.allowed_extensions.lastIndexOf(ext) !== -1) {
                      valid_files.push(file);
                  } else {
                      invalid_files.push(file);
                  }
              });
              this.filesChangeEmiter.emit(valid_files);
              this.filesInvalidEmiter.emit(invalid_files);
          }
      }
  </code></pre>
  
  <p>This way I got an error message like this:</p>
  
  <blockquote>
    <p>./src/app/hotels/drag-n-drop/drag-n-drop.directive.ts<br>
    Module not found: Error: Can't resolve '@angular/router/src/utils/collection' in '/Users/MrFox/OneDrive/greenfox/hotel-booking-admin-frontend/src/app/hotels/drag-n-drop'<br>
    @ ./src/app/hotels/drag-n-drop/drag-n-drop.directive.ts 11:0-63<br>
    @ ./src/app/app.module.ts<br>
    @ ./src/main.ts<br>
    @ multi webpack-dev-server/client?<a href="http://localhost:4200" rel="nofollow noreferrer">http://localhost:4200</a> ./src/main.ts  </p>
  </blockquote>
  
  <p>I already imported it to the <code>app.module</code>.</p>