Angular 7 support tree with drag-and-drop sortable data tree. It`s fast and smart.
npm install ngx-tree-dndAngular 7 support tree with drag-and-drop sortable data tree. Its fast and smart.
 
#### Help the project and star it :3 ####
To install library, run:
`bash`
$ npm install ngx-tree-dnd --save
`typescript
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 its components, directives and pipes in your Angular application:
``xml`
{{title}}
You need to import default styles for tree ( you can change them by rewrite classes )
`json`
"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:
`typescript`
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:
`xml`
in you component file:
`typescript`
youTree = [
{
name: 'first elem',
id: 1234567890,
childrens: [
{
name: 'first child elem',
id: 0987654321,
childrens: []
}
]
},
];
You can trigger events by following code:
#### example
in you template file:
`xml`
in you component file:
`typescript`
onDragStart(event) {
console.log(event);
}
#### example
in you template file:
`xml`
in you component file:
`typescript`
onDragEnter(event) {
console.log(event);
}
#### example
in you template file:
`xml`
in you component file:
`typescript`
onDragLeave(event) {
console.log(event);
}
in you template file:
`xml`
in you component file:
`typescript`
onDragEnd(event) {
console.log(event);
}
#### example
in you template file:
`xml`
in you component file:
`typescript`
onAllowDrop(event) {
console.log(event);
}$3
Trigger drop item action
#### example
in you template file:
`xml`
in you component file:
`typescript`
onDrop(event) {
console.log(event);
}
#### example
in you template file:
`xml`
in you component file:
`typescript`
onAddItem(event) {
console.log(event);
}
in you template file:
`xml`
in you component file:
`typescript`
onStartRenameItem(event) {
console.log(event);
}
in you template file:
`xml`
in you component file:
`typescript`
onFinishRenameItem(event) {
console.log(event);
}
#### example
in you template file:
`xml`
in you component file:
`typescript`
onStartDelete(event) {
console.log(event);
}
#### example
in you template file:
`xml`
in you component file:
`typescript`
onFinishDelete(event) {
console.log(event);
}
#### example
in you template file:
`xml`
in you component file:
`typescript`
onCancelDelete(event) {
console.log(event);
}
You can enable/disable and set some elements on tree by write simple config:
#### example
in you template file:
`xml`
in you component file:
`typescript`
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 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.
#### example
in you component file:
`typescript`
youTree = [
{
name: 'google.com',
id: 777,
options: {
// item options
href: 'google.com', // item href for , 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:
`css``
/ ===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