angular - Event propogation not working in angular4 -

i have div structure this:

<div [ngclass]="showdragdrop == true ? 'show' : 'fade' "                        (click)="hidewindow($event); $event.stoppropagation()">      <input type="file" (change)="uploadfile($event)" .../> </div> 

basically on hidewindow() method set showdragdrop =false , makes div hide.

my issue is, have input='file' button inside div , when click on fires 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 not working

move event.stoppropagation(); input's click()

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

and

removetheclick(event){    event.stoppropagation();    } 

demo

or, more concise version, @yurzui suggested:

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