CODEWITHSUNDEEP
angular
Newbie
Newbie

Reputation: 827

function is not called from change event using jquery ui slider in angular

I am using jQuery UI slider in Angular and slider is initialized and being slide properly.however, when i call another function from change event then its not called and giving error as below :

TypeError: this.getSelected is not a function

HTML :

component.ts :

ngAfterViewInit(){
    $("#rangeSlider1").slider({
           range: true,
            min: 0,
            max: 333,
            step: 10,
            values: [0, 333],
         change: function(event,ui){
              this.getSelected(ui);
         }
    })
}

getSelected(){
   // further actions need to execute on change of the slider.
}

Here, getSelected() is another function which i need to call when slider range is change, but this gives me an error as mentioned above. Please note, I can't put the whole code of getSelected function to slider initialization.

Thank you!

Upvotes: 0

Views: 114

Answers (1)

Suren Srapyan
Suren Srapyan

Reputation: 68655

In the change function this does not refer to the component, instead of that it refers to undefined.

You need to use arrow function which preserves the outer this.

change: (event, ui) => {
    this.getSelected(ui);
}

Upvotes: 1

Related Questions