Angular 7 Data Sortable Draggable Smart Tree

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

angularmaterialtree example stackblitz, angular material tree examples, angular material tree with dynamic data, material tree angular, angular material tree view

Create and Reorder Lists With Drag-and-Drop | SortableJS

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