Can't access angular(8) instances in JqueryUI

Question

I am using jquery UI resizable I already added:

import * as $ from 'jquery'; 
import 'jquery-ui-dist/jquery-ui';

Resizable also works.

$('.myclass').resizable({
  resize: function (event, ui) {
    var divclass = document.getElementsByClassName('ABC');
    for (var i = 0, n = divclass.length; i < n; ++i) {
      var divid = divclass[i].id;
      console.log(divclass[i].id);
      this.myservice.height(divid, ui.size.height + 'px');
      this.myservice.width(divid, ui.size.width + 'px');
    }
  },
});

I can't access the functions width and height inside the jQuery but I can access outside. Can anyone help me with this issue? :)

Answer 1

I got it resolved by adding "var selfRef = this;" outside the function

 var selfRef = this;
  $('.myclass').resizable({
     resize: function (event, ui) {
       var divclass = document.getElementsByClassName('ABC');
       for (var i = 0, n = divclass.length; i < n; ++i) {
          var divid = divclass[i].id;
          console.log(divclass[i].id);
    
       selfRef.myservice.height(divid, ui.size.height + 'px');
       selfRef.myservice.height(divid, ui.size.height + 'px');
        }
      },
  });