ngx-tree-dnd

Angular 7 support tree with drag-and-drop sortable data tree. It`s fast and smart.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
ngx-tree-dnd
38152.6.04 years ago5 years agoMinified + gzip package size for ngx-tree-dnd in KB

Readme

ngx-tree-dnd npm version npm downloads
Angular 7 support tree with drag-and-drop sortable data tree. It`s fast and smart.
Dependency Status Build status codecov Known Vulnerabilities License MIT

Help the project and star it :3 ####

Installation

New ngx-tree-dnd with draggable/sortable tree data, easy for use.
To install library, run:
$ npm install ngx-tree-dnd --save

Import NgxTreeModule module

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 { }

Once library is imported, you can use it`s components, directives and pipes in your Angular application:
<h1>
  {{title}}
</h1>
<lib-ngx-tree-component [treeData]='youTree' [config]='config'></lib-ngx-tree-component>

Styles

You need to import default styles for tree ( you can change them by rewrite 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"
      }
    }
  ],

Demo

Demo with editor:
Run on stackblitz.com
Demo application:
Run on stackblitz.com

NGX-TREE-DND DOCS

With the development of the plug-in docs will be replenished. So do not forget update the packadge.

1.Set the base tree

Use treeData on ngx-tree-component BUT be careful!
The interface accepts only the following structure:
export interface TreeModel {
   name: string; // name of item
   id: number; // id of item
   options?: TreeItemOptions; // options of item
   childrens: TreeModel[]; // childrens list
}
export interface TreeItemOptions {
   // item options
   href?: string;
   hidden?: boolean;
   hideChildrens?: boolean;
   draggable?: boolean;
   position?: number;
   edit?: boolean;
   disabled?: boolean;
   // item buttons
   showDropChildZone?: boolean;
   showActionButtons?: boolean;
   showDeleteButton?: boolean;
   showExpandButton?: boolean;
}

example

in you template file:
<lib-ngx-tree-component [treeData]='youTree' ></lib-ngx-tree-component>

in you component file:
youTree = [
  {
    name: 'first elem',
    id: 1234567890,
    childrens: [
      {
        name: 'first child elem',
        id: 0987654321,
        childrens: []
      }
    ]
  },
];

2.Events

You can trigger events by following code:

ondragstart()

Trigger start of dragging element

example

in you template file:
<lib-ngx-tree-component [treeData]='youTree' (ondragstart)='onDragStart($event)'> </lib-ngx-tree-component>
in you component file:
onDragStart(event) {
console.log(event);
  }

ondragenter()

Trigger if draggable element enter to drop zone.

example

in you template file:
<lib-ngx-tree-component [treeData]='youTree' (ondragenter)='onDragEnter($event)'> </lib-ngx-tree-component>
in you component file:
onDragEnter(event) {
console.log(event);
  }

ondragleave()

Trigger if draggable element enter to drop zone.

example

in you template file:
<lib-ngx-tree-component [treeData]='youTree' (ondragleave)='onDragLeave($event)'> </lib-ngx-tree-component>
in you component file:
onDragLeave(event) {
console.log(event);
  }

ondragend()

Trigger end of drag event

example

in you template file:
<lib-ngx-tree-component [treeData]='youTree' (ondragend)='onDragEnd($event)'> </lib-ngx-tree-component>
in you component file:
onDragEnd(event) {
console.log(event);
  }

onallowdrop()

Trigger enter on drop zone

example

in you template file:
<lib-ngx-tree-component [treeData]='youTree' (onallowdrop)='onAllowDrop($event)'> </lib-ngx-tree-component>
in you component file:
onAllowDrop(event) {
console.log(event);
  }

ondrop()

Trigger drop item action

example

in you template file:
<lib-ngx-tree-component [treeData]='youTree' (ondrop)='onDrop($event)'> </lib-ngx-tree-component>
in you component file:
onDrop(event) {
console.log(event);
  }

onadditem()

Trigger add new item action

example

in you template file:
<lib-ngx-tree-component [treeData]='youTree' (onadditem)='onAddItem($event)'> </lib-ngx-tree-component>
in you component file:
onAddItem(event) {
console.log(event);
  }

onStartRenameItem()

Trigger start renaming item

example

in you template file:
<lib-ngx-tree-component [treeData]='youTree' (onStartRenameItem)='onStartRenameItem($event)'> </lib-ngx-tree-component>
in you component file:
onStartRenameItem(event) {
  console.log(event);
}

onFinishRenameItem()

Trigger finish renaming item after validation

example

in you template file:
<lib-ngx-tree-component [treeData]='youTree' (onStartRenameItem)='onFinishRenameItem($event)'> </lib-ngx-tree-component>
in you component file:
onFinishRenameItem(event) {
  console.log(event);
}

onStartDeleteItem()

Trigger start Deleting action item

example

in you template file:
<lib-ngx-tree-component [treeData]='youTree' (onStartDeleteItem)='onStartDelete($event)'> </lib-ngx-tree-component>
in you component file:
onStartDelete(event) {
  console.log(event);
}

onFinishDeleteItem()

Trigger finish deleting action item

example

in you template file:
<lib-ngx-tree-component [treeData]='youTree' (onFinishDeleteItem)='onFinishDelete($event)'> </lib-ngx-tree-component>
in you component file:
onFinishDelete(event) {
  console.log(event);
}

onCancelDeleteItem()

Trigger cancel deleting action item

example

in you template file:
<lib-ngx-tree-component [treeData]='youTree' (onCancelDeleteItem)='onCancelDelete($event)'> </lib-ngx-tree-component>
in you component file:
onCancelDelete(event) {
  console.log(event);
}

  1. Config

You can enable/disable and set some elements on tree by write simple config:

example

in you template file:
<lib-ngx-tree-component [treeData]='youTree' [config]='config'> </lib-ngx-tree-component>
in you component file:
config =  {
  showActionButtons: true, // show/hide action buttons for all elements
  showAddButtons: true, // show/hide add button for all elements
  showRenameButtons: true, // show/hide rename buttons for all elements
  showDeleteButtons: true, // show/hide delete buttons for all elements
  showRootActionButtons: true, // shlow/hide root action bottons
  enableExpandButtons: true, // // show/hide expand buttons for all elements
  enableDragging: true, // enable/disable dragging
  rootTitle: 'Root', // Tree titile name
  validationText: 'Enter valid name', // form validation text 
  minCharacterLength: 1, // minimum valid chars
  setItemsAsLinks: false, // set tree as <a> link-items, use 'href' option for set link.
  setFontSize: 16, // font-size of items in tree.
  setIconSize: 14 // font-size of font-awesome icons inside buttons.
}

  1. Items options

You can change items options by set 'options' key on item object.

example

in you component file:
youTree = [
  {
    name: 'google.com',
    id: 777,
    options: {
        // item options
        href: 'google.com', // item href for <a> , use if you set 'setItemsAsLinks: true' in config.
        hidden: 'false', // hide element without removing from data array.
        hideChildrens: false, // hide childrens of element.
        draggable: true, // allow block dragging single element if set 'enableDragging: true'
        position: 1,  // set position of item for sort tree.
        disabled: false, // disaled buttons and add opacity to element.
        // buttons
        showActionButtons: true, // show/hide  action buttons for element.
        showDeleteButton: true, // if 'false' element cannot be deleted.
        showExpandButton: true // show/hide expand buttons for element.
    }
    childrens: []
  }
];

  1. Styles

You can rewrite all styles like you want. Here some for example:
/* ===Tree items=== */
.tree-child {
  /* change styles for child elements */
}
.tree-title {
  /* change styles for items title */
}
.tree-content {
  /* change styles for tree.childrens wrapper */
}
.tree-link {
  /* change styles for links if  config.setTreeItemAsLinks = true  */
}
/* ===Form=== */
.input-rename {
  /* change styles for input name/rename  */
}
/* ===Buttons=== */
.tree-btn {
  /*  used in all tree buttons  */
}
.add-btn {
    /*  styles for add button  */
}
.submit-btn {
    /*  styles for submit button  */
}
.edit-btn {
    /*  styles for edit button  */
}
.delete-btn {
    /*  styles for delete button  */
}
.show-btn {
    /*  styles for show expand button  */
}
.hide-btn {
    /*  styles for hide expand button  */
}

Special thanks to the people who help to improve and maintain this repository:

njofce

Thank you for use my plug-in! Subscribe for more plugins! :)

Made with love by Zicrael(Yaroslav Kikot) ^^

License

MIT © Yaroslav Kikot