Angular-tree-component: How can we add UI of add, edit and delete node?

[anoop-chauhan]

Hi, Is there a way to add the functionality with UI of add, edit and delete node.

[dmbaker90]

I added this functionality myself with the following:

html:

   <tree-root #tree [(state)]="state" [nodes]="selectedMap.mapNodes" [options]="options"
        (activate)="onActivateNode($event)">
        <ng-template #treeNodeTemplate let-node let-index="index">
            <div class="tree-node-content">
                <div>
                    <span>{{getNodeLabel(node.data)}}</span>
                </div>
                <div>
                    <mat-icon (click)="copyNode(node, tree)" color="primary">file_copy</mat-icon>
                    <mat-icon (click)="addNode(node)" class="add-button">add</mat-icon>
                    <mat-icon (click)="deleteNode(node, tree)" color="warn">delete</mat-icon>
                </div>
            </div>
        </ng-template>
    </tree-root>

css:

    .tree-node-content {
        display: flex;
        justify-content: space-between;
    }

typescript:

    onActivateNode(event: any) {
        this.selectedNode = event.node.data;
        // Do stuff with selected node
    }

    copyNode(node: any, tree) {
        const parentNode = node.realParent ? node.realParent : node.treeModel.virtualRoot;
        const copyNode = JSON.stringify(node.data);
        const newNode = JSON.parse(copyNode);
        this.deleteIds(newNode);
        parentNode.data.children.push(newNode);
        tree.treeModel.update();
    }

    // The JSON Strinigfy function also copies the node id's which we need to delete, so the tree generates new Ids
    deleteIds(node: TreeNode) {
        node.id = null;
        if (node.children) {
            node.children.forEach(child => this.deleteIds(child));
        }
    }

    addNode(node: any) {
        const newNode = new TreeNode();
        newNode.answer = 'new item';
        if (!node.data.children) {
            node.data.children = [];
        }
        node.data.children.push(newNode);
        this.tree.treeModel.update();

        const someNode = this.tree.treeModel.getNodeById(node.id);
        someNode.expand();
    }

    deleteNode(node, tree) {
        const parentNode = node.realParent ? node.realParent : node.treeModel.virtualRoot;
        _.remove(parentNode.data.children, function (child) {
            return child === node.data;
        });
        tree.treeModel.update();
        if (node && node.parent && node.parent.data && node.parent.data.children.length === 0) {
            node.parent.data.hasChildren = false;
        }

        if (this.selectedNode.id === node.data.id) {
            this.selectedNode = null;
        }
    }

[anoop-chauhan]

@dmbaker90 Thanks for your comment.

[tobiasengelhardt]

Closing this for now. There is an update for the docs planned where we need to address common use cases like this. Please open a new issue if the problem still exists.