Issues calling service after submission w/ Angular 2

Hi there,

I’m using Angular 2 w/ SweetAlert2.

swal({
      title: 'Message All Models',
      input: 'textarea',
      inputPlaceholder: 'Type your message here',
      showCancelButton: true
    }).then(function() {
      this.modelService.messageModels()
    }, function(dismiss) {
      console.log('Dismissed')
 });

PROBLEM: I’m able to run this service outside of the swal() but for some reason when I run after the then() I get the following error:

ERROR:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property ‘modelService’ of undefined TypeError: Cannot read property ‘modelService’ of undefined at model-list.component.ts:174 - [ this is where service is called ]

[toverux]

This is not a bug, this is a misuse of the language 😄

@m1xf1t: replace :

.then(function() {
  this.modelService.messageModels()
})

with :

.then(() => {
  this.modelService.messageModels()
})

// shorter :
.then(() => this.modelService.messageModels())

// equivalent to :
.then((function() {
  this.modelService.messageModels()
}).bind(this))

That should work. The arrow function expression will bind the current context of this on the anonymous function being created (here, the component). Otherwise, using function, the scope of this is volatile (not captured by the closure, contrarily to the other variables) and determined at the call site (inside SweetAlert).

I suggest you to read one of the articles here: https://www.google.com/search?q=this+context+javascript (sorry for the Google link, no offense, I just don’t have a particular article in mind).

[limonte]

For bug reports, please include:

• a jsfiddle in order for us to be able to reproduce the issue.
• expected behavior of the plugin
• actual behavior

JSFiddle template: https://jsfiddle.net/limon/ad3quksn/

See Contributing.md