Angular Material mat-tree with checkboxes select all

Question

I'm using Tree with checkboxes, and I want to add a button to check all checkboxes, I tried different methods but no good, the best thing i was able to achieve is this:

  selectAllFiscal() {
    this.rootItems.forEach(node => {
      this.todoItemSelectionToggle(node);
    });
  }

rootItems is an array of root nodes.

I can see that nodes are selected when I iterate checklistSelection.selected, but the checkboxes are not selected in the browser, can anybody point the problem, thanks.

Marshal · Accepted Answer · 2019-12-06 14:55:18Z

7

Try the following for your method

  checkAll(){
    for (let i = 0; i < this.treeControl.dataNodes.length; i++) {
      if(!this.checklistSelection.isSelected(this.treeControl.dataNodes[i]))
        this.checklistSelection.toggle(this.treeControl.dataNodes[i]);
      this.treeControl.expand(this.treeControl.dataNodes[i])
    }
  }

Stackblitz

https://stackblitz.com/edit/angular-hpsj5x?embed=1&file=app/tree-checklist-example.html

edited Dec 6, 2019 at 14:55

answered Dec 6, 2018 at 16:55

Marshal

11.2k3 gold badges40 silver badges58 bronze badges

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

2 Comments

Andrei Chivu Over a year ago

this has a bug in it, if you already had selected a node, when you press checkAll is deselecting the already existing selection

Marshal Over a year ago

See revision to stackblitz. You are correct, but you can leverage the isSelected() function of the SelectionModel. This in my opinion would be less verbose and a more readable syntax for your development team members versus using this.select in your solution.

Andrei Chivu · Accepted Answer · 2019-12-06 13:01:36Z

0

The first answer has a bug in it, if you press select all and you already had selected a checkbox from the tree it s doing only toggle, not select/deselect-all. This is my solution:

In Html use something simillar to this:

<mat-checkbox [checked]="isAllSelected" (change)="selectAll()">Select all</mat-checkbox>

And in your component:

selectAll(): void {
    this.select = !this.select;
    this.treeControl.dataNodes.forEach((r, index) => {
      this.treeControl.expand(this.treeControl.dataNodes[index]);
      this.select
        ? this.checklistSelection.select(this.treeControl.dataNodes[index])
        : this.checklistSelection.deselect(this.treeControl.dataNodes[index]);
    });
    this.isAllSelected = true;
  }

edited Dec 6, 2019 at 13:01

answered Dec 6, 2019 at 12:52

Andrei Chivu

1342 silver badges12 bronze badges

2 Comments

Marshal Over a year ago

You should use this.checklistSelection.isSelected() to check the current state of the checkbox, it is what the function is there for. See revision above to the original answer.

Andrei Chivu Over a year ago

@Marshal you need to keep track of your flag for the toggle effect.

Collectives™ on Stack Overflow

Angular Material mat-tree with checkboxes select all

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related