Property 'addToast' does not exist on type 'GlobalEventHandlers' angular 5

Question

basically i have a method called "addToast" in my component.ts file. which is this :-

addToast(options): any {
    if (options.closeOther) {
      this.toastyService.clearAll();
    }

this.position = options.position ? options.position : this.position;

const toastOptions: ToastOptions = {
  title: options.title,
  msg: options.msg,
  showClose: options.showClose,
  timeout: options.timeout,
  theme: options.theme,
  onAdd: (toast: ToastData) => {
    /* added */
  },
  onRemove: (toast: ToastData) => {
    /* removed */
  }
};

switch (options.type) {
  case "default":
    this.toastyService.default(toastOptions);
    break;
  case "info":
    this.toastyService.info(toastOptions);
    break;
  case "success":
    this.toastyService.success(toastOptions);
    break;
  case "wait":
    this.toastyService.wait(toastOptions);
    break;
  case "error":
    this.toastyService.error(toastOptions);
    break;
  case "warning":
    this.toastyService.warning(toastOptions);
    break;
}


}

and i'm try to using this method to another method called "onLoadFile". which is this :-

onLoadFile(event) {
    var img = new Image();
    img.src = event.target.result;
    var isUploadPic = null;

    img.onload = function(): any {
      console.log(img.width, "x", img.height);
      // var isUploaded = false;
      if (img.width != 600 && img.height != 600) {
        this.addToast({
          title: "FAIL!",
          msg: "Diamension Should Be 600x600.",
          timeout: 6000,
          theme: "default",
          position: "top-right",
          type: "error"
        });
      }
    };

    console.log(isUploadPic);


  } 

but it showing me an error on VSCODE, which is "Property 'addToast' does not exist on type 'GlobalEventHandlers'". i am sharing a image of that.

and also i'm sharing the image of console ERROR. which is below.

Please tell me how can i use the "addToast" method on that position. give me a solution.

Answer 1

Issue

You are using nested anonymous function and that is why context has been changed and this is point to GlobalEventHandlers not the Component class.

Fix

You have two options to fix this issue

Fix 1

The first fix to keep the reference of this and use it inside the anonymous function. The current context (this) can be assigned to some variable say self and can be used anywhere in deep nested functions. this may change however self will always point to the parent.

   let self = this;
    img.onload = function(): any {
          console.log(img.width, "x", img.height);
          // var isUploaded = false;
          if (img.width != 600 && img.height != 600) {
            self.addToast({
              title: "FAIL!",
              msg: "Diamension Should Be 600x600.",
              timeout: 6000,
              theme: "default",
              position: "top-right",
              type: "error"
            });
          }
        };

Fix 2

The second option is to use arrow function. In arrow function this always point to the context it is called from. This is better approach than fix 1.

img.onload = () => {
      console.log(img.width, "x", img.height);
      // var isUploaded = false;
      if (img.width != 600 && img.height != 600) {
        this.addToast({
          title: "FAIL!",
          msg: "Diamension Should Be 600x600.",
          timeout: 6000,
          theme: "default",
          position: "top-right",
          type: "error"
        });
      }
    };