title: Angular2 how to change background color when drag & drop
body: <p>I have a drag and drop container written in Angular 2 typescript. I want to change the background color of the drag &amp; drop container while I am dragging a file into the container. </p>
  
  <p>Typescript: </p>
  
  <pre><code>@HostListener('dragover', ['$event']) public onDragOver(evt){
   evt.preventDefault();
   evt.stopPropagation();
  }
  
  @HostListener('dragleave', ['$event']) public onDragLeave(evt){
   evt.preventDefault();
   evt.stopPropagation();
  }
  
  @HostListener('drop', ['$event']) public onDrop(evt){
   evt.preventDefault();
   evt.stopPropagation();
   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>HTML: </p>
  
  <pre><code>&lt;div class="dropzone" (filesChangeEmiter)="onFilesChange($event)"
      (filesInvalidEmiter)="onFileInvalids($event)"&gt;
     &lt;div class="centered"&gt;Drop your file here!&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I tired to use HostBinding to change the background color, but it doesn't work. How can I detect dragging state and change its CSS?</p>