Angular 7 support tree with drag-and-drop sortable data tree. It`s fast and smart.
New ngx-tree-dnd with draggable/sortable tree data, easy for use.
To install library, run:
$ npm install ngx-tree-dnd --saveimport { 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>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 with editor:
Demo application:
With the development of the plug-in docs will be replenished. So do not forget update the packadge.
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;
}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: []
}
]
},
];You can trigger events by following code:
Trigger start of dragging element
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);
}Trigger if draggable element enter to drop zone.
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);
}Trigger if draggable element enter to drop zone.
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);
}Trigger end of drag event
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);
}Trigger enter on drop zone
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);
}Trigger drop item action
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);
}Trigger add new item action
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);
}Trigger start renaming item
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);
}Trigger finish renaming item after validation
in you template file:
<lib-ngx-tree-component [treeData]='youTree' (onFinishRenameItem)='onFinishRenameItem($event)'> </lib-ngx-tree-component>in you component file:
onFinishRenameItem(event) {
console.log(event);
}Trigger start Deleting action item
in you template file:
<lib-ngx-tree-component [treeData]='youTree' (onStartDeleteItem)='onStartDeleteItem($event)'> </lib-ngx-tree-component>in you component file:
onStartDeleteItem(event) {
console.log(event);
}Trigger end Deleting action item
in you template file:
<lib-ngx-tree-component [treeData]='youTree' (onFinishDeleteItem)='onFinishDeleteItem($event)'> </lib-ngx-tree-component>in you component file:
onFinishDeleteItem(event) {
console.log(event);
}Trigger cancel Deleting action item
in you template file:
<lib-ngx-tree-component [treeData]='youTree' (onCancelDeleteItem)='onCancelDeleteItem($event)'> </lib-ngx-tree-component>in you component file:
onCancelDeleteItem(event) {
console.log(event);
}You can enable/disable and set some elements on tree by write simple config:
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.
}You can change items options by set 'options' key on item object.
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: []
}
];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 */
}Made with love by Zicrael(Yaroslav Kikot) ^^
MIT © Yaroslav Kikot
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent