Angular-tree-component: Custom expand/collapse icons

[musienkoyuriy]

I need an ability to customize expand/collapse icon, for example, to "plus/minus". Is there this functionality? If no, do you plan to implement it? Also, tricks to realize it will be useful

[Krishna47]

I also wanted the same thing.
I achieved this by CSS.
In my global css (styles.css), I overrode class like below:

tree-node-content::before {
content: "\f07b"
}

html:

I am using font-awesome 5.
The icon can be implemented by adding class="fas" to tree-root in your html.
Check the Unicode in font-awesome page and add it like above.

Little tweaking is needed though.

[mark53]

You can use custom template for this
https://angular2-tree.readme.io/docs/templates#treenodewrappertemplate

Then change tree-node-expander to your custom element.
You can use node.toggleExpanded()to toggle state and node?.isExpanded to determine what icon should be displayed.

[phhbr]

Issue closed by provided solutions. if this issue still remain, you may open this again.

[drullo]

I wish the documentation were more clear and complete. I had this same question and I went to the documentation first. I did read the Templates page, but it's not clear (because it's not documented) that this (replacing the expander) can be done. The information posted above by @mark53 helped me figure that out, but it should be documented appropriately.

[sagunpandey]

@drullo I still can't customize expander icon. I am trying to change tree-node-wrapper.

    <tree-root #tree [nodes]="tagTree" [options]="treeOptions">
      <ng-template #treeNodeFullTemplate let-node let-index="index" let-templates="templates">
        <div
          [class]="node.getClass()"
          [class.tree-node]="true"
          [class.tree-node-expanded]="node.isExpanded && node.hasChildren"
          [class.tree-conode-collapsed]="node.isCollapsed && node.hasChildren"
          [class.tree-node-leaf]="node.isLeaf"
          [class.tree-node-active]="node.isActive"
          [class.tree-node-focused]="node.isFocused">
          <tree-node-wrapper [node]="node" [index]="index" [templates]="templates"></tree-node-wrapper>
          <tree-node-children [node]="node" [templates]="templates"></tree-node-children>
        </div>
      </ng-template>
      <ng-template #treeNodeWrapperTemplate let-node let-index="index" let-templates="templates">
        <div class="node-wrapper" [style.padding-left]="node.getNodePadding()">
          <tree-node-expander [node]="node">
            <div>
              <fa-icon *ngIf="node?.isCollapsed" [icon]="['fas', 'plus-square']"></fa-icon>
              <fa-icon *ngIf="node?.isExpanded" [icon]="['fas', 'minus-square']"></fa-icon>
            </div>
          </tree-node-expander>
          <div class="node-content-wrapper"
               [class.node-content-wrapper-active]="node.isActive"
               [class.node-content-wrapper-focused]="node.isFocused"
               (click)="node.mouseAction('click', $event)"
               (dblclick)="node.mouseAction('dblClick', $event)"
               (contextmenu)="node.mouseAction('contextMenu', $event)"
               (treeDrop)="node.onDrop($event)"
               [treeAllowDrop]="node.allowDrop"
               [treeDrag]="node"
               [treeDragEnabled]="node.allowDrag()">

            <tree-node-content [node]="node" [index]="index" [template]="treeNodeTemplate"></tree-node-content>
          </div>
        </div>
      </ng-template>
      <ng-template #treeNodeTemplate let-node let-index="index">
        <div>
          <span> {{ node.data.tagName }}</span>
        </div>
      </ng-template>
    </tree-root>

[sagunpandey]

I have figured it out. Here my updated treeNodeWrapperTemplate.

      <ng-template #treeNodeWrapperTemplate let-node let-index="index" let-templates="templates">
        <div style="display: flex; align-items: center;" class="node-wrapper" [style.padding-left]="node.getNodePadding()">
          <div style="color: #6C757D;" (click)="node.toggleExpanded()" *ngIf="node?.data?.children?.length > 0">
            <fa-icon *ngIf="node?.isCollapsed" [icon]="['fas', 'plus-square']"></fa-icon>
            <fa-icon *ngIf="node?.isExpanded" [icon]="['fas', 'minus-square']"></fa-icon>
          </div>
          <div class="node-content-wrapper"
               [class.node-content-wrapper-active]="node.isActive"
               [class.node-content-wrapper-focused]="node.isFocused"
               (click)="node.mouseAction('click', $event)"
               (dblclick)="node.mouseAction('dblClick', $event)"
               (contextmenu)="node.mouseAction('contextMenu', $event)"
               (treeDrop)="node.onDrop($event)"
               [treeAllowDrop]="node.allowDrop"
               [treeDrag]="node"
               [treeDragEnabled]="node.allowDrag()">

            <tree-node-content [node]="node" [index]="index" [template]="treeNodeTemplate"></tree-node-content>
          </div>
        </div>
      </ng-template>

[MiroslavGrozdanovski]

@sagunpandey , one thing I changed from your example is using *ngIf="node.hasChildren" instead of *ngIf="node?.data?.children?.length > 0".

This way it will work even if you have overwritten the default key for children (mine was "subFolders") and also if you use async loading and the "node.data.children" is empty, but actually has data when expanded.