Angular material checkbox automatically un-checks itself

Question

I have a list that I display as checkboxes using angular-material (Angular 7). Below I will add code snippet for .html and .ts files.

Whenever I click on a checkbox it is checked but then immediately un-checked. I entered in debug mode and see that when I click on a checkbox, my isSelected() method gets called 4 times by Angular. When I click on it, it immediately goes to checked state. Then it is still checked the second time that Angular calls it. On the third time, it becomes un-checked (meanwhile isSelected() is still true). I cannot figure out what I did wrong. What I tried is:

Switch from isSelected() method to a class property (added the isSelected boolean field on myListItem objects)
Added bidirectional binding on top of the previous idea
Switch from checked to ngModel

Nothing helped. What else to try, I don't know. Please help me out.

html snippet:

class MyListItem {
  id: number
  name: string
}

// omitted annotations
export class MyComponent implements OnInit, OnDestroy {
  myList: MyListItem[] = [] // omitted initialization

  isSelected(myListItem: MyListItem): boolean {
    return this.myList.includes(myListItem)
  }

  toggle(myListItem: MyListItem): void {
    // omitted the code, I debugged it and it works correctly: 
    // it adds/removes the item to/from the list
  }
}

<mat-list>
  <mat-list-item *ngFor="let myListItem of myList">
    <mat-checkbox flex="100" (click)="toggle(myListItem)" 
                  [checked]="isSelected(myListItem)">
      {{ myListItem.name }}
    </mat-checkbox>
  </mat-list-item>
</mat-list>

post the code on stackbitz this way no one will be able to help — Sanyam Goel
– Sanyam Goel, Commented Feb 6, 2019 at 21:11
@quirimmo This also works, thank you, and is, IMO, a neater solution! — Ababababa
– Ababababa, Commented Feb 6, 2019 at 21:21
@ArsenSimonean you are welcome :) just posted as answer too for future readers too — quirimmo
– quirimmo, Commented Feb 6, 2019 at 21:22

quirimmo · Accepted Answer · 2019-02-06 21:22:22Z

1

Use change event not click:

<mat-checkbox flex="100" (change)="toggle(myListItem)" 
                  [checked]="isSelected(myListItem)">
      {{ myListItem.name }}
    </mat-checkbox>

answered Feb 6, 2019 at 21:22

quirimmo

10k3 gold badges33 silver badges46 bronze badges

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

Comments

Nate Gurian · Accepted Answer · 2019-02-06 21:15:21Z

1

I am not sure if this will work but you can add an Event parameter to the toggle function.

toggle(myListItem: MyListItem, event: any) { event.preventDefault() }

Then in your html:

(click)="toggle(myListItem, $event)"

Again, Not sure if this will work, but I have found that sometimes these click events will happen automatically, unless the prevent default() function is called

answered Feb 6, 2019 at 21:15

Nate Gurian

298 bronze badges

2 Comments

Ababababa Over a year ago

This worked, thank you, but I will use what @quirimmo suggested- to use (change) instead of (click) because it is neater like that.

Nate Gurian Over a year ago

I understand. Just glad a solution was found

Collectives™ on Stack Overflow

Angular material checkbox automatically un-checks itself

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related