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 ponent:

@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!

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 ponent:

@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!

• javascript
• checkbox
• angular

• I just copied and pasted your code in a plunker, it's working fine. Although I think object is a reserved word. – Abdulrahman Alsoghayer Commented May 5, 2016 at 8:52
• Correction, I just checked, object is not a reserved word. It just didn't feel right :) – Abdulrahman Alsoghayer Commented May 5, 2016 at 9: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 Commented May 5, 2016 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 mit ? There is probably some other code you didn't put in your question that's causing the problem. – Abdulrahman Alsoghayer Commented May 5, 2016 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 Commented May 6, 2016 at 7:43

1 Answer 1

You can check ngModelChange:

//This is your ponent

@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>