ngx-tree-dnd
Angular 7 support tree with drag-and-drop sortable data tree. It`s fast and smart.
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';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgxTreeDndModule,
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;
id: number;
options?: TreeItemOptions;
childrens: TreeModel[];
}
export interface TreeItemOptions {
href?: string;
hidden?: boolean;
hideChildrens?: boolean;
draggable?: boolean;
position?: number;
edit?: boolean;
disabled?: boolean;
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);
}
3. 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,
showAddButtons: true,
showRenameButtons: true,
showDeleteButtons: true,
showRootActionButtons: true,
enableExpandButtons: true,
enableDragging: true,
rootTitle: 'Root',
validationText: 'Enter valid name',
minCharacterLength: 1,
setItemsAsLinks: false,
setFontSize: 16,
setIconSize: 14
}
4. 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: {
href: 'google.com',
hidden: 'false',
hideChildrens: false,
draggable: true,
position: 1,
disabled: false,
showActionButtons: true,
showDeleteButton: true,
showExpandButton: true
}
childrens: []
}
];
5. Styles
You can rewrite all styles like you want. Here some for example:
.tree-child {
}
.tree-title {
}
.tree-content {
}
.tree-link {
}
.input-rename {
}
.tree-btn {
}
.add-btn {
}
.submit-btn {
}
.edit-btn {
}
.delete-btn {
}
.show-btn {
}
.hide-btn {
}
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