Callback from JQuery-UI to Angular 6

Question

I added the JQuery-UI MonthPicker to my Angular 6 application.
I want to trigger an Angular action when my date changes:

  ngOnInit() {
    $(document).ready(function() {
      $('#myMonthPicker').MonthPicker(
        {
          Button: false,
          MaxMonth: -1,
          MonthFormat: 'MM yy'
          OnAfterChooseMonth: this.update()
        }
      );
    });
  }

  update() {
    alert('works');
  }

The update method is never hit.
And I have the following error:

TypeError: this.update is not a function

How could I call an Angular method from my JQuery-UI code ?

Jeffrey Roosendaal · Accepted Answer · 2018-10-30 10:05:15Z

1

Because the this scope has been lost by using function() {}, try:

ngOnInit() {
  const update = this.update();

  $(document).ready(function() {
    $('#myMonthPicker').MonthPicker(
      {
        Button: false,
        MaxMonth: -1,
        MonthFormat: 'MM yy'
        OnAfterChooseMonth: update
      }
    );
  });
}

Or change your function to ES6 arrow notation:

$(document).ready(() => {
  ...
});

Note: This generally fixes this problem, but I'm not how jQuery UI handles it. Can't guarantee this will work

answered Oct 30, 2018 at 10:05

Jeffrey Roosendaal

7,1978 gold badges45 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nicolas Over a year ago

Thanks, using the ES6 arrow notation allows me to call this.update

Collectives™ on Stack Overflow

Callback from JQuery-UI to Angular 6

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related