2

I have a strange problem with checkboxes using angular2 (beta 17).

I'm trying to set same checkboxes as elements has the array and bind the change or click event.

For example I have an array: 

myObjects=[
    {value:true},
    {value:true},
    {value:false},
    {value:true}
];

And I'm using the ngFor to create all the checkboxes:

<div *ngFor="let myObject of myObjects; let i = index" >
    <input 
            type="checkbox" 
            [checked]="myObject.value" 
            (change)="updateCheckedOptions(i, $event)"
    />
</div>

And finally I have a function in my component:

@Input() myObjects;

updateCheckedOptions(index,event){
    this.myObjects[index].value=event.target.checked;
}

But the problem is that the checkbox don't change, I mean that when I click the checkbox, if the initial state is checked, always remain checked and vice versa.

I have tried using (click), (change), [(ngModel)] but it does not work any.

Thanks!

Idir Ouhab Meskine
  • 587
  • 1
  • 9
  • 23
  • I just copied and pasted your code in a [plunker](http://plnkr.co/edit/SjIRhAwa56ScfrJDZml3?p=preview), it's working fine. Although I think `object` is a reserved word. – Abdulrahman Alsoghayer May 05 '16 at 08:52
  • Correction, I just checked, `object` is not a reserved word. It just didn't feel right :) – Abdulrahman Alsoghayer May 05 '16 at 09:01
  • Hi, the objects name are only a symbolic name, I have edited the question with other name and I have added the type of the "myObjects" variable. Thanks! – Idir Ouhab Meskine May 05 '16 at 10:17
  • 1
    The name is not the issue, I was mistaken. Also, your code is working fine. Did you check the plunker on my commit ? There is probably some other code you didn't put in your question that's causing the problem. – Abdulrahman Alsoghayer May 05 '16 at 11:39
  • I have found the problema, but my solution is only a workaround to continue the development. I had to use the ngOnInit method to copy in a private attribute in my class the myObject input like: ngOnInit(){this.myPrivateMyObject=this.myObject} and use the myPrivateObject instead myObject and then works properly. I'm going to read more documentations but is a solution. Regards and thanks so much! – Idir Ouhab Meskine May 06 '16 at 07:43
  • Please take a look at this answer http://stackoverflow.com/questions/37077707/launch-an-event-when-checking-a-checkbox-in-angular2 – Karan Bir Mar 23 '17 at 17:03

1 Answers1

1

You can check ngModelChange:

//This is your component

@Input() myObjects;

myObjects=[
    {value:true},
    {value:true},
    {value:false},
    {value:true}
];

updateCheckedOptions(index,event){
    this.myObjects[index].value=event.target.checked;
    console.log(index + " ---- " + event);
}
<div *ngFor="let myObject of myObjects; let i = index" >
    <input 
            type="checkbox" 
            [checked]="myObject.value" 
            (ngModelChange)="updateCheckedOptions(i, $event)"
    />
</div>
Elvin Garibzade
  • 475
  • 4
  • 12