CODEWITHSUNDEEP
angularfrontendjavascript-databindingangular2-databinding
Bhuban Shrestha
Bhuban Shrestha

Reputation: 1324

Two Way Binding Not Working in Angular 2

In my project I have used jQuery plugins(datepicker and iCheck) and probably will be using more plugins. I have managed to call jquery plugin methods from angular but angular 2 way data binding is not working on the elements that uses jQuery plugin.

For e.g. I have checkbox in my template as

<div class="checkbox icheck">
   <label >
     <input type="checkbox" id="rememberMe" #rememberMe  [(ngModel)]="rememberMeChecked"/> Remember Me
   </label>
</div>

for above checkbox in my component typescript file

import { Component, ViewChild, ElementRef, AfterViewInit, Input } from '@angular/core';

declare var jQuery: any;

@Component({
selector: 'login',
templateUrl: '/template/login.html'
})

export class LoginComponent implements AfterViewInit  {
@Input()
@ViewChild('rememberMe') input: ElementRef;
rememberMeChecked: boolean;
ngAfterViewInit() {
   //Commenting iCheck method rusults in proper two-way data binding
    jQuery(this.input.nativeElement).iCheck({
        checkboxClass: 'icheckbox_square-blue',
        radioClass: 'iradio_square-blue',
        increaseArea: '20%' // optional,
    });
    // jQuery(this.input.nativeElement).on('ifChecked', function(){
    //     LoginComponent.rememberMeChecked = true;
    // })
    // jQuery(this.input.nativeElement).on('ifUnchecked', function(){
    //     this.remember = false;
    // })
  }
}

commenting iCheck method results in proper data binding but due to iCheck I could not get checked status. What should be done for this.

  Why rememberMeChecked variable value doesn't get changed even when checkbox is checked?

Upvotes: 0

Views: 1199

Answers (1)

Dan
Dan

Reputation: 1355

Remove the 2-way binding and try:

<input type="checkbox" id="rememberMe" #rememberMe 
       [checked]="rememberMeChecked" 
       (change)="rememberMeChecked = $event.target.checked"/>Remember Me</label>

Upvotes: 0

Related Questions