Brett Brett - 28 days ago 13
jQuery Question

Angular 2: Bootstrap Switch not changing value of variable

I'm using bootstap switches for checkboxes in my Angular 2 application. When you click on the switch, I want the value of my

LightNeeded
variable in my class to change along with it. I have the following code:

HTML:

<input class="bootstrap-switch light-needed" name="LightNeeded" type="checkbox" [(ngModel)]="LightNeeded">


TypeScript file:

LightNeeded: boolean;

ngOnInit(): void {
// Invoke bootstrap switches
$('.bootstrap-switch').bootstrapSwitch({
onText: "Yes",
offText: "No"
});
this.changeBootstrapSwitchValues();
}

changeBootstrapSwitchValues() {
$('.light-needed').on('switchChange.bootstrapSwitch', function (event:any, state:any) {
if (state) {
console.log('true');
this.LightNeeded= true;
} else {
console.log('false');
this.LightNeeded= false;
};
});
}


When switch is true, it successfully logs true to the console. When it is false, it successfully logs false to the console. However, it never changes the value of my
LightNeeded
variable.

When I hover over
this
of
this.LightNeeded
, I get the following warning:


suspicious 'this' usage: in current context 'this' refers to a local
function, not to a containing class.


How can I get
this
to work the way I am intending and change the value of my
LightNeeded
variable? I'm open to taking other approaches that make sense too. I tried adding
[attr.checked]="LightNeeded? true : null"
to my input, but it didn't work.

EDIT:

The two-way binding from adding
[(ngModel)]="LightNeeded"
worked when it was a simple checkbox, but for some reason the bootstrap switch plugin breaks that two-way binding. Other plugins such as JQuery Inputmask and JQuery UI Datepicker also break two-way binding.

Answer

Your event handler function changes the context of this. Instead, you should use an arrow function, which does not change context/binding. See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Example:

$('.light-needed').on('switchChange.bootstrapSwitch', (event:any, state:any) => {
        if (state) {  
            console.log('true');
            this.LightNeeded= true;
        } else {  
            console.log('false');
            this.LightNeeded= false;
        };
    });