Made a data binding, and the value on the page does not change. Although the variable is changing.

TS:

export class SliderRangeComponent { range: string = "25 - 55"; onRangeChange(model: string): void { console.log("range " + this.range); this.range = model; console.log(model); } createSliderRange(minValue: number, maxValue: number) { var scope = this; $("#slider-range").slider({ animate: "fast", range: true, min: minValue, max: maxValue, values: [ minValue, maxValue ], slide: function (event, ui) { let newVal: string = `${ui.values[0]} - ${ui.values[1]}`; //$("#range").val(newVal); scope.onRangeChange(newVal); } }); } }

HTML:

 <p> <label for="range">Years range: </label> <input type="text" id="range" value="{{ range }}" [ngModel]="range" />{{ range }} </p> <div id="slider-range"></div>

If you remove from the comments is $("#range").val(newVal); then the value changes. But as I understood it should change when the variable variable changes

  • 2
    1. This code is generally not very similar to angular2. 2. What he does is some kind of tin. Especially, the addition of strings from jQuery objects in the return value. 3. The minimum reproducible example is Qwertiy ♦
  • where is createSliderRange called? - Grundy
  • @Grundy in the parent component - Viktor Bylbas
  • one
    in fact, everything is simple: the angular does not know that something has changed when the callback is called by jquery, therefore it does not update the view, the same problem as with the first angulyar. therefore, it is not recommended to use jquery plug-ins inside applications on an angular - Grundy
  • @Grundy I just decided to use the ready-made library, so this code is used - Viktor Bylbas

0