Angular2 cannot access 'this' inside a promise

Question

I cannot call a function inside the promise of the ng2-sweetalert2 plugin

swal({
    title: 'Are you sure?',
    text: "You won't be able to revert this!",
    type: 'warning',
    showCancelButton: true,
    confirmButtonText: 'Yes, delete it!'
}).then(function(x) {
    this.removeNote(key);
    swal(
    'Deleted!',
    'Your file has been deleted.',
    'success'
    );
}, function(e){
       console.log('Cancelled');
});

removeNote(key){
    this.todo.remove(key);
    this.afService.closeNote(key);
}

this.removeNote() causes an error.

EXCEPTION: Uncaught (in promise): TypeError: Cannot read property 'removeNote' of undefined

How can I overcome this? I used NgZone, but I get the same error

Answer 1

Assuming you are using TypeScript, you can use

Answer 2

this is because it thisrefers to the promise itself. do the following:

let self = this;
   swal({
    title: 'Are you sure?',
    text: "You won't be able to revert this!",
    type: 'warning',
    showCancelButton: true,
    confirmButtonText: 'Yes, delete it!'
}).then(function(x) {
    self.removeNote(key);
    swal(
    'Deleted!',
    'Your file has been deleted.',
    'success'
    );
}, function(e){
       console.log('Cancelled');
});

removeNote(key){
    this.todo.remove(key);
    this.afService.closeNote(key);
}

Answer 3

:

swal({})
.then(() => { <your angular 2 service call here...>})

:

customDialog(id,value){
    swal({
      title: 'Are you sure?',
      text: "Message",
      type: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Yes',
      cancelButtonText: 'No',
      confirmButtonClass: 'btn btn-success alertboxmargin',
      cancelButtonClass: 'btn btn-danger alertboxmargin',
      buttonsStyling: false
    }).then(() => {
      this.services.testfunction(table,value,id)
      .subscribe( result => {
        if(result) {
          if(value) {
            swal('Message!','Message.','success')
          }
          else {
            swal('Message!','Message.','success')
          }          
        }
        else {
          swal('Error!','Try again later.','error')
        }        
      });
    },
      function (dismiss) {
      // dismiss can be 'cancel', 'overlay',
      // 'close', and 'timer'
      if (dismiss === 'cancel') {
        swal('Cancelled','No action performed!','error')
      }
    })//then closing
} // Dialog Closing