How do I programmatically select Material Tree nodes with SelectionModel?

Question

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?

Answer 1

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

---