@circlon/angular-tree-component: How to customize checkbox template

759 Views Asked by At

I want to use custom templates for the tree nodes as shown here on their website https://angular2-tree.readme.io/docs/templates

But I also need the checkbox tri-state functionality as demonstrated here https://angular2-tree.readme.io/docs/tri-state-checkboxes

In this custom treeNodeFullTemplate example they have a checkbox as part of the template but it doesn't have the tri-state relationship between the parents and children. Is there a way to have a custom checkbox and keep all the correct event listeners etc.? I can't seem to find any documentation on the checkboxes API if there is one.

<tree-root id="tree" [focused]="true" [nodes]="nodes">
  <ng-template #treeNodeFullTemplate let-node let-index="index" let-templates="templates">
    <div class="tree-node">
      <input type="checkbox" [checked]="node.isActive" (change)="node.toggleActivated(true)" />
      <tree-node-expander [node]="node"></tree-node-expander>
      <div
        class="node-content-wrapper"
        [class.node-content-wrapper-active]="node.isActive"
        [class.node-content-wrapper-focused]="node.isFocused"
        (click)="node.toggleActivated(true)">
        <span [class]="node.data.className + 'Index'">{{ index }}</span>
        <span [class]="node.data.className" [class.title]="true">{{ node.data.title }}</span>
      </div>
      <tree-node-children [node]="node" [templates]="templates"></tree-node-children>
    </div>
  </ng-template>
</tree-root>

I can see that the (change) method on the checkbox is not right but do I need to write my own one to get the parent and children and determine state on click? It seems strange that I can't just tap into an existing API.

0

There are 0 best solutions below