Angular 7 Data Sortable Draggable Smart Tree | ngx-tree-dnd

ngx-tree-dnd is an Angular 7 support tree with a drag-and-drop sortable data tree. It’s fast and smart.

New ngx-tree-dnd with draggable/sortable tree data, easy to use.

How to make use of it:


$ npm install ngx-tree-dnd --save

1. Import the NgxTreeModule.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgxTreeDndModule } from 'ngx-tree-dnd'; // here

  declarations: [
  imports: [
    NgxTreeDndModule,   // add  NgxTreeDndModule to imports
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

2. Once the library is imported, you can use its components, directives, and pipes in your Angular application:

<lib-ngx-tree-component [treeData]='youTree' [config]='config'></lib-ngx-tree-component>

3. You need to import the default styles for the tree (you can change it by rewriting the classes).

"apps": [
      "root": "src",
      "outDir": "dist",
      "assets": [
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/"

Simple DnD Tree Structure, ngx-tree-dnd Plugin/Github


Bootstrap 5 Treeview Dynamically Collapsible | bs5treeview
jQuery Dynamic Hierarchy Treeview Plugin | jsTree
A Tree Component Made From Pure JavaScript | Pickle Tree

See Demo And Download

Official Website(Zicrael): Click Here

This superior jQuery/javascript plugin is developed by Zicrael. For extra advanced usage, please go to the official website.