Remove the tree node

[wenqi73]

What problem does this feature solve?

Remove the tree node

What does the proposed API look like?

import { Component, OnInit, ViewChild } from '@angular/core';
import { NzFormatEmitEvent, NzTreeComponent, NzTreeNode } from 'ng-zorro-antd';

@Component({
  selector: 'nz-demo-tree-method',
  template: `
    <nz-tree
      #nzTree
      [(ngModel)]="nodes"
      (nzClick)="remove($event)"
    >
    </nz-tree>`
})

export class NzDemoTreeMethodComponent implements OnInit {
  @ViewChild('nzTree') nzTree: NzTreeComponent;
  nodes = [
    new NzTreeNode({
      title   : 'root1',
      key     : '1001',
      children: [
        {
          title   : 'child1',
          key     : '10001',
          children: [
            {
              title   : 'child1.1',
              key     : '100011'
            }
          ]
        }
      ]
    })
  ];

  remove(e: any): void {
    e.node.remove();
  }

  ngOnInit(): void {
  }
}

[zhuguohua19820515]

this function is very important, I think the clearChildren need to add index or key ,like this: node.clearChildren (index: int) or node.clearChildren (key: string)

[wenqi73]

It can be used like this:

export class NzDemoTreeMethodComponent {
  nodes = [
    // ...
  ];

  remove(node: NzTreeNode): void {
    const nodes: NzTreeNode[] = node.parentNode ? node.parentNode.children : this.nodes;
    nodes.splice(nodes.findIndex(n => n.key === node.key), 1);
  }
}

I try to add the function into NzTreeNode, but I can not get the rootNodes

[IonelLupu]

I see the docs don't show anything about using ngModel and @wenqi73 's solution is based on that. The question is, how do you delete a node if it is in the root? Using node.remove() works only for child nodes but not for nodes that are at the root of the tree.

Updating the nodes manually will produce a undesirable flicker animation as seen in this example. Using nzNoAnimation is not a solution since we don't have those beautiful animations anymore. :(

[AffanAzeem7]

can we remove children word from our nznode data and used another word for that having array like that
nodes = [
{

  title: 'xyz',
  key: '0-0',
  Resellers: [
    {
      title: 'Inhouse',
      key: '0-0-0',
      
      Merchants: [
        { title: 'abc', 

        key: '0-0-0-0' ,
      }


        
      ]
      
    }

]
},

];
and the data is coming from an backend