Event propogation not working in angular4

Question

I have a div structure like this:

<div [ngClass]="showDragDrop == true ? 'show' : 'fade' " 
                      (click)="hideWindow($event); $event.stopPropagation()">
     <input type="file" (change)="uploadFile($event)" .../>
</div>

Basically on the hideWindow() method i set showDragDrop =false and this makes my div to get hide.

My issue is, I have a input='file' button inside this div and when I click on this it fires the hideWindow() method.

I tried this

 hideWindow(event) {    
    event.stopPropagation();
    this.showDragDrop=false;
  }

this

(event)="doSomething($event); $event.stopPropagation()"

and this

(event)="doSomething($event); false"

but it is not working

Answer 1

Move event.stopPropagation(); to input's click()

<input type="file" (click)="removetheClick($event)" ...>

and

removetheClick(event){
   event.stopPropagation();   
}

Demo

or, a more concise version, as @yurzui suggested:

<input type="file" (click)="$event.stopPropagation()" ...>