Логика для флажков в mat-tree

Question

Попытка выяснить, как добавить логику, где, если пользователь нажимает родительский флажок, он будет щелкать по всем дочерним флажкам.Если родитель не нажал, отключите все дочерние элементы под этим родителем.Если родительский элемент включен, и пользователь хочет, чтобы один дочерний элемент был установлен в значение true.Есть идеи, как это сделать?Спасибо!

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

interface ITreeNode {
    children?: ITreeNode[];
    name: string;
    expanded: boolean;
}

const TREE_DATA = [
    {
        name: 'Land Plane',
        expanded: false,
        children: [
            { name: 'Piston', expanded: false, children: [] },
            { name: 'Jet', expanded: false, children: [] },
            { name: 'Turboprop', expanded: false, children: [] }
        ]
    },
    {
        name: 'Helicopter',
        expanded: false,
        children: [
            { name: 'Piston', expanded: false, children: [] },
            { name: 'Turboprop', expanded: false, children: [] }
        ]
    },
    {
        name: 'Amphibian',
        expanded: false,
        children: [{ name: 'Turboprop', expanded: false, children: [] }]
    },
    {
        name: 'Tiltwing',
        expanded: false,
        children: [{ name: 'Turboprop', expanded: false, children: [] }]
    },
    {
        name: 'Gyrocopter',
        expanded: false,
        children: [{ name: 'Piston', expanded: false, children: [] }]
    },
    {
        name: 'Tower',
        expanded: false,
        children: []
    },
    {
        name: 'Gyrocopter',
        expanded: false,
        children: []
    }
];

@Component({
    selector: 'globe-source-facets',
    templateUrl: './globe-source-facets.component.html',
    styleUrls: ['./globe-source-facets.component.scss']
})
export class GlobeSourceFacetsComponent {
    public nestedTreeControl: NestedTreeControl<ITreeNode>;
    public nestedDataSource: MatTreeNestedDataSource<ITreeNode>;
    indeterminate = false;
    constructor() {
        this.nestedTreeControl = new NestedTreeControl<ITreeNode>(
            this.getChildren
        );
        this.nestedDataSource = new MatTreeNestedDataSource();
        this.nestedDataSource.data = TREE_DATA;
    }

    public hasNestedChild = (_: number, nodeData: ITreeNode) =>
        nodeData.children.length > 0;

    public getChildren = (node: ITreeNode) => node.children;

    public changeState(node) {
        node.expanded = !node.expanded;
    }

    public onChange(node) {
        console.log("test");

    }
}

<div class="facets-container">
    <div class="tree-container">
        <mat-tree
            [dataSource]="nestedDataSource"
            [treeControl]="nestedTreeControl"
            class="example-tree"
        >
            <mat-tree-node *matTreeNodeDef="let node">
                <li class="mat-tree-node">
                    <button mat-icon-button disabled></button>
                    <mat-checkbox class="checklist-leaf-node" [checked]="isPublic"
                    (change)="onChange(node)">{{
                        node.name
                    }}</mat-checkbox>
                </li>
            </mat-tree-node>

            <mat-nested-tree-node
                *matTreeNodeDef="let node; when: hasNestedChild"
            >
                <li>
                    <div class="mat-tree-node">
                        <button
                            mat-icon-button
                            [attr.aria-label]="'toggle ' + node.name"
                            (click)="changeState(node)"
                        >
                            <mat-icon class="mat-icon-rtl-mirror">
                                {{
                                    node.expanded
                                        ? 'expand_more'
                                        : 'chevron_right'
                                }}
                            </mat-icon>
                        </button>
                        <mat-checkbox class="checklist-leaf-node">{{
                            node.name
                        }}</mat-checkbox>
                    </div>
                    <ul [class.example-tree-invisible]="node.expanded">
                        <ng-container matTreeNodeOutlet></ng-container>
                    </ul>
                </li>
            </mat-nested-tree-node>
        </mat-tree>
    </div>
    <div class="facet-actions">
        <button mat-button>CLEAR</button>
        <button mat-button color="primary">APPLY</button>
    </div>
</div>