calling angular2 service with es5 not with es6 arrow function

Question

I'm trying to call a method in angular2 service using es5, here's my implementation:

Constructor & the method to call the service:

 theService;

  constructor(_service: SendFileService) {
    this.theService = _service;
  }

the method that will call the service:

imageHandler(value) {
  const service = SendFileService;
  const ImageInput = document.createElement('input');

  ImageInput.setAttribute('type', 'file');
  ImageInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
  ImageInput.classList.add('ql-image');
  ImageInput.click();

  ImageInput.addEventListener('change', function()  {
    const file = ImageInput.files[0];
    if (ImageInput.files != null && ImageInput.files[0] != null) {
    this.theService.SendFileService(file)
      .subscribe(function(res){console.log(res); });
    }
}.bind(this));
}

This is the service:

  private _url = '/api/uploadImage';

  constructor(private http: Http) {     }

       sendFileToServer(file) {

          const input = new FormData();
          input.append('file', file);
    return  this.http.post(this._url, input).map(resp => resp.json()).catch(err => Observable.throw(err));

      }

When i tried to run the program it gives me :

this.theService.SendFileService is not a function

But when i tried to use the fat arrow of es6 it works perfectly:

imageHandler(value) {
  const service = SendFileService;
  const ImageInput = document.createElement('input');

  ImageInput.setAttribute('type', 'file');
  ImageInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
  ImageInput.classList.add('ql-image');
  ImageInput.click();

  ImageInput.addEventListener('change', () => {
    const file = ImageInput.files[0];
    if (ImageInput.files != null && ImageInput.files[0] != null) {
      this._service.sendFileToServer(file)
      .subscribe(resp => {this._returnedURL = resp; this.pushImageToEditor(); });
    }
});

}

Answer 1

The Code in ES6 works because

Fat arrows change how this is handled. Before... In ES5, bind() or var that = this; are necessary as functions create their own this . We need to store the parent this in a variable that can be referenced in the callback or take care of binding ourselves.

function CounterES5() {
  this.seconds = 0;
  window.setInterval(function() {
    this.seconds++;
  }.bind(this), 1000); // or }.bind(this), 1000) and skip that = this
}

var counterA = new CounterES5();
window.setTimeout(function() {
  ChromeSamples.log(counterA.seconds);
}, 1200);

After... ES6 Arrows instead bind this to the immediate enclosing lexical scope:

function CounterES6() {
  this.seconds = 0;
  window.setInterval(() => this.seconds++, 1000);
}

Source

Answer 2

Try this

imageHandler(value) {
    const service = SendFileService;
    const ImageInput = document.createElement('input');

    const theService = this.theService;

    ImageInput.setAttribute('type', 'file');
    ImageInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
    ImageInput.classList.add('ql-image');
    ImageInput.click();

    ImageInput.addEventListener('change', function () {
        const file = ImageInput.files[0];
        if (ImageInput.files != null && ImageInput.files[0] != null) {
            theService.SendFileService(file)
                .subscribe(function (res) { console.log(res); });
        }
    }.bind(this));
}