Угловой материал 2 поменять корни потомков флажок цвет

Question

Я использую дерево угловых материалов 2 с флажками и хочу динамически менять цвет флажков.Самый простой способ сделать это - щелкнуть на нем ((изменить) событие, вызванное) и изменить MatCheckboxChange.source.color.Проблема в том, что, когда я нажимаю на корневой узел, есть ли способ получить все источники флажков потомков (изменить цвета всех потомков)?Пример здесь

шаблон

<mat-checkbox class="checklist-leaf-node"
              [checked]="checklistSelection.isSelected(node)"
              (change)="todoLeafItemSelectionToggle(node, $event)">{{node.item}}</mat-checkbox>

код

todoLeafItemSelectionToggle(node: TodoItemFlatNode, event: MatCheckboxChange): void {
    event.source.color = 'warn'; // <---

    this.checklistSelection.toggle(node);
    this.checkAllParentsSelection(node);
  }

Answer 1

добавить цветовую переменную в шаблон

<mat-checkbox class="checklist-leaf-node"
          [checked]="checklistSelection.isSelected(node)"
          [color]="color"
          (change)="todoLeafItemSelectionToggle(node, $event)">{{node.item}}</mat-checkbox>

, затем в вашем javascript

this.color = 'primary';
this.color = 'accent';
this.color = 'warn';

изменить:

для динамических цветов [color]="checklistSelection.isSelected(getParentNode(node)) ? 'primary' : 'warn'"