Bind click and change checkbox angular2

Question

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!

I just copied and pasted your code in a plunker, it's working fine. Although I think object is a reserved word. — Abdulrahman Alsoghayer
– 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
– 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
– Idir Ouhab Meskine, Commented May 5, 2016 at 10:17
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
– 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
– Idir Ouhab Meskine, Commented May 6, 2016 at 7:43

Elvin Garibzade · Accepted Answer · 2017-07-21 06:19:33Z

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>

answered Jul 21, 2017 at 6:19

Elvin Garibzade

4954 silver badges12 bronze badges

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

1 Comment

Surendra Babu Parchuru Over a year ago

Garbzade this is not working with angular 4 material and native html radio check box also. below is my code {{<input type = "checkbox" [checked]= "parentchecked" (ngModelChange)="listcheckboxchecked(list,$event)">{{list.value}} <mat-checkbox class="example-margin" [checked]= "parentchecked" (ngModelChange)="listcheckboxchecked(list,$event)">{{list.value}}</mat-checkbox><br>

Collectives™ on Stack Overflow

Bind click and change checkbox angular2

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related