Two Way Binding Not Working in Angular 2

Question

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?

Dan · Accepted Answer · 2017-03-29 14:39:14Z

0

Remove the 2-way binding and try:

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

edited Mar 29, 2017 at 14:39

answered Mar 23, 2017 at 11:14

Dan

1,35510 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dan Over a year ago

I edited the answer. The new method may work for you.

Collectives™ on Stack Overflow

Two Way Binding Not Working in Angular 2

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related