Создание пользовательского флажка в виде дерева Angular

Question

Я хочу создать компонент Tree View в Angular с флажком. Пожалуйста, найдите мой код по адресу -

https://stackblitz.com/edit/angular-qvzr8c

Здесь я могу отобразить древовидное представление на интерфейсе пользователя. Но нужно реализовать функциональность -

1. Когда флажок Родитель установлен, тогда все его дочерние флажки должны быть проверены автоматически.
2. Когда отмечены все дочерние флажки, флажок родительского узла должен автоматически выбираться.
3. В конце укажите список всех выбранных флажков.

Вот как я могу установить флажки для модели и достичь вышеуказанных функций.

Answer 1

первое, что вам нужно, это добавить новое необязательное свойство к вашему TreeNode

interface TreeNode {
    label: string;
    check?:boolean; //<--this one
    children: TreeNode[];
  }

После того, как вы можете использовать [ngModel] на входе и (ngModelChange) для вызова функции "selectNode"

 <label class="node__label">
        <input type="checkbox" [ngModel]="node.check" 
          (ngModelChange)="selectNode(node,$event)"/>
    {{ node.label }}
</label>

seletNode - это функция, которая вызывает рекурсивную функцию:

  public selectNode( node: TreeNode,value:boolean ) : void {
        this.check(node,value)
  }

  check(node:any,value:boolean)
  {
    node.check=value;
    node.children.forEach(x=>
    {
      this.check(x,value)
    })
  }

Вы можете видеть в этом stackblitz

Но вы можете принять во внимание предложить @Dseroski и не изобретать велосипед:)

Answer 2

Angular Материал имеет довольно хороший модуль дерева. Этот пример явно похож на то, что вам нужно, за исключением нескольких изменений логики c при установке флажка.

https://stackblitz.com/angular/baxxqmgxmgq?file=src%2Fapp%2Ftree-checklist-example.ts