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:

Installation:

$ 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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxTreeDndModule,   // add  NgxTreeDndModule to imports
    LibraryModule 
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

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

<h1>
  {{title}}
</h1>
<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": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css",
        "node_modules/ngx-tree-dnd/styles-tree-dnd.css" 
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],

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

Read More – 

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.

Share