Angular2 cannot access 'this' inside a promise

Question

I am unable to call a function inside promise of 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() cause error.

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

How do I overcome this? I used NgZone but i get the same error

Hey Ashik, I'm looking into setting this sweet alert up in my project, noticed within the documentation it doesn't specify about importing the within the ng module, do you have to do this? — Code Ratchet, Mar 06 '17 at 11:54
Hi Code, Save sweetalert.min.js and sweetalert.min.css from here and include them in your index.html file as normal javascript files `https://www.jsdelivr.com/projects/sweetalert2`. then use this line in your component instead of import `declare var swal: any;` — Ashik Basheer, Mar 06 '17 at 20:47

score 36 · Accepted Answer · answered Mar 05 '17 at 09:41

36

Assuming you're using TypeScript, you could use the arrow function expression, which preserves the value of this.

swal({...}).then((x) => console.log(this)); // now 'this' is your component

answered Mar 05 '17 at 09:41

Brother Woodrow

6,092
3
18
20

works perfectly :) Also the "x" here now refers to the value returned by the promise's success callback so use it as normal (x.data.Employee ...) – NitinSingh Mar 09 '18 at 12:51

score 8 · Answer 2 · answered Mar 05 '17 at 09:31

this is because this refers to the promise itself. do this :

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);
}

score 0 · Answer 3 · edited Oct 07 '17 at 08:26

You can use like following manner also:

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

Following is the working example:

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

Angular2 cannot access 'this' inside a promise

3 Answers3

Linked