How do I programmatically select Material Tree nodes with SelectionModel?

0

Issue

I have a tree with checkboxes (let’s use Material’s example here). I’d like the fruit nodes to begin checked. How do I check those nodes?

I see that SelectionModel has a select() method that the example passes a node. But in the example, the data the tree is made of is an array of TodoItemNode, but the SelectionModel contains TodoItemFlatNode. The transformer method in the example can “flatten” my node (ie. convert TodoItemNode to TodoItemFlatNode), but that would return a new instance.

How can I programmatically select mat-tree checkboxes to match my data?

Solution

To pre-select the fruits node implement the following in an ngAfterViewInit for the TreeChecklistExample class in the attached stackblitz example.

  • This will loop through the dataNodes in the treeControl
  • If item == 'Fruits' select node and expand
  • Also if item == 'Groceries' expand node as it is the parent of Fruits.

    ngAfterViewInit() {
        for (let i = 0; i < this.treeControl.dataNodes.length; i++) {
          if (this.treeControl.dataNodes[i].item == 'Fruits') {
            this.todoItemSelectionToggle(this.treeControl.dataNodes[i]);
            this.treeControl.expand(this.treeControl.dataNodes[i])
          }
          if (this.treeControl.dataNodes[i].item == 'Groceries') {
            this.treeControl.expand(this.treeControl.dataNodes[i])
          }
        }
      }
    

Stackblitz

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


Answered By – Marshal

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More