Как реализовать CHECKBOX для каждого свойства узла дерева с функциональностью - Angular Материал

Question

Это мой код Html дерева. Здесь мне нужно установить флажок для каждого значения узла дерева.

<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="example-tree">

  <!-- This is the tree node template for leaf nodes -->
  <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle (click)="onLeafNodeClick(node)">
    <li class="mat-tree-node">

**HERE I WANT TO IMPLEMENT THE CHECKBOX**

      <button mat-icon-button disabled></button>
      {{node.name}}
    </li>
  </mat-tree-node>

  <!-- This is the tree node template for expandable nodes -->
  <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
    <li>
      <div class="mat-tree-node">
        <button mat-icon-button matTreeNodeToggle
                [attr.aria-label]="'toggle ' + node.name">
          <mat-icon class="mat-icon-rtl-mirror">
            {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
          </mat-icon>
        </button>
**HERE I WANT IMPLEMENT THE CHECKBOX**
        {{node.name}}
      </div>
      <ul [class.example-tree-invisible]="!treeControl.isExpanded(node)">
        <ng-container matTreeNodeOutlet></ng-container>
      </ul>
    </li>
  </mat-nested-tree-node>
</mat-tree>

Это мой файл компонентов дерева. Здесь я могу получить данные, щелкнув значения узла дерева. Мне нужно получить данные, установив флажок в узле дерева

import {NestedTreeControl} from '@angular/cdk/tree';
import {Component} from '@angular/core';
import {MatTreeNestedDataSource} from '@angular/material/tree';

interface FoodNode {
  name: string;
  children?: FoodNode[];
}

const TREE_DATA: FoodNode[] = [
  {
    name: 'Fruit',
    children: [
      {name: 'Apple'},
      {name: 'Banana'},
      {name: 'Fruit loops'},
    ]
  }, {
    name: 'Vegetables',
    children: [
      {
        name: 'Green',
        children: [
          {name: 'Broccoli'},
          {name: 'Brussel sprouts'},
        ]
      }, {
        name: 'Orange',
        children: [
          {name: 'Pumpkins'},
          {name: 'Carrots'},
        ]
      },
    ]
  },
];

/**
 * @title Tree with nested nodes
 */
@Component({
  selector: 'tree-checklist-left',
  templateUrl: 'tree-checklist-left.component.html',
  styleUrls: ['tree-checklist-left.component.css'],
})
export class TreeChecklistLeftComponent {
  treeControl = new NestedTreeControl<FoodNode>(node => node.children);
  dataSource = new MatTreeNestedDataSource<FoodNode>();

  constructor() {
    this.dataSource.data = TREE_DATA;   
  }

  hasChild = (_: number, node: FoodNode) => !!node.children && node.children.length > 0;

  getAncestors(array, name) {
    if (typeof array != 'undefined') {
      for (let i = 0; i < array.length; i++) {
        if (array[i].name === name) {
          console.log( 'name ', name );
          return [array[i]];
        }
        const a = this.getAncestors(array[i].children, name);
        if (a !== null) {
          a.unshift(array[i]);
          return a;
        }
      }
    }
    return null;
  }

  onLeafNodeClick(node: FoodNode): void {
    const ancestors = this.getAncestors(this.dataSource.data, node.name);
    console.log( 'ancestors ', ancestors );

    // this.treeControl.collapse(ancestors[0]);
    console.log( 'direct parent  ', ancestors[ancestors.length - 2] );
    let breadcrumbs = '';
    ancestors.forEach(ancestor => {
      breadcrumbs += `${ancestor.name}/`;
    });
    console.log( 'breadcrumbs ', breadcrumbs );
  }

}

Мне нужно реализовать флажок для родительского и дочернего свойства. КОД ОЦЕНЕН !!!