Angular7 "this" is undefined

Question

I imported a custom confirm dialog into a function and "this" went undefined everywhere except for the dialog function.

This is the function:

onDelete(CTId) {
    this.confirmDialogService.confirmThis( 
      "Confirm Delete",
      function() {
          this.service.deleteContactDetail(CTId).subscribe(
          res => {
            this.service.refreshList();
            this.toastr.warning("Deleted Successfully", "Contact Details");
          },
          err => {
            console.log(err);
            this.toastr.error("Failed to Delete");
          }
        );
      },
      function() {
        console.log("closed dialog");
      }
    );
  }

For the confirmDialogService this is defined like so this: this and everywhere else it's any

Change `function() {` to `() => {` and read a bit about arrow functions (though I am confused about `this: this`). — pzaenger, Jun 30 '19 at 22:15
Oh sorry it did, I changed it to ```function() => {``` instead of ```() => {```. Really need to read up on that. — Antoniusz, Jun 30 '19 at 22:37

score 4 · Accepted Answer · answered Jun 30 '19 at 22:30

Prefer to use arrow functions.

For example :

function(arg) {
   ...
}

become :

(arg) => {
   ...
}

An arrow function will inherit scope from caller method. So this will be the same.

Your code should look like this:

onDelete(CTId) {
  this.confirmDialogService.confirmThis( 
    "Confirm Delete",
    () => {
      this.service.deleteContactDetail(CTId).subscribe(
        res => {
          this.service.refreshList();
          this.toastr.warning("Deleted Successfully", "Contact Details");
        },
        err => {
          console.log(err);
          this.toastr.error("Failed to Delete");
        }
      );
    },
    () => console.log("closed dialog")
  );
}

You can read about arrow functions :

Angular7 "this" is undefined

1 Answers1