title: Angular 2: Bootstrap Switch not changing value of variable
body: <p>I'm using bootstap switches for checkboxes in my Angular 2 application. When you click on the switch, I want the value of my <code>LightNeeded</code> variable in my class to change along with it. I have the following code:    </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;input class="bootstrap-switch light-needed" name="LightNeeded" type="checkbox" [(ngModel)]="LightNeeded"&gt;
  </code></pre>
  
  <p>TypeScript file:</p>
  
  <pre><code>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;
          };
      });
  }
  </code></pre>
  
  <p>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 <code>LightNeeded</code> variable.</p>
  
  <p>When I hover over <code>this</code> of <code>this.LightNeeded</code>, I get the following warning:</p>
  
  <blockquote>
    <p>suspicious 'this' usage: in current context 'this' refers to a local
    function, not to a containing class.</p>
  </blockquote>
  
  <p>How can I get <code>this</code> to work the way I am intending and change the value of my <code>LightNeeded</code> variable? I'm open to taking other approaches that make sense too. I tried adding <code>[attr.checked]="LightNeeded? true : null"</code> to my input, but it didn't work.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>The two-way binding from adding <code>[(ngModel)]="LightNeeded"</code> 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.</p>