Unable to get a change event handler function to work on a file upload widget

Question

I am trying to get a function to fire on the "change" event of a file upload field. I could get it to work in another file, but not in this one. I placed debugger code inside the function change listener to check whether it's going inside that but it's not going inside that function. There are no errors in the console.

My code, as well as a link to a fiddle, are provided below:

https://jsfiddle.net/rb9L0qaf/

 <label class="fileContainer dragAndDropHolder" >
                    {{dragDrop}}
                    <input type="file" id="attachKickBrowseSim" [class.disabled]="isFingersLocked" (change)="changeListener($event)" />
                  </label>&nbsp;&nbsp;

    /* On Change */
  changeListener($event) : void {
      this.swimming($event.target);
  }

  /*Encode File*/
  swimming(inputValue: any): void { 
    var foul = this;
      var file:File = inputValue.files[0];

        var myReader:FileReader = new FileReader();
        myReader.onloadend = (e) => {
        this.encodeBase64 = myReader.result;
        foul.fileSelect=$("#attachKickBrowseSim").val().replace(/^.*\\/, "");
      if(foul.fileSelect==''){
        foul.dragDrop = foul.clearSim;
      }else{
        foul.dragDrop= "";
        foul.dragDrop= foul.fileSelect;
      }
        }
        $('.addMouseKickForm').show();
        if(inputValue.files.length>0)
        {
          myReader.readAsDataURL(file); 
        }


  }