Angular Nestable List
ngx-nestable-ukg
Nestable list for Angular4 and beyond. This is a Angular adaptation of Jquery Nestable library. Demo
Features
- Drag and Drop
- Sorting
- Events (drag, drop, over, out) // TODO
- Nesting
- Touch support // TODO
Instalation
npm i ngx-nestable-ukg --save
Implementation
app.module.ts
;
app.component.ts
public options = as NestableSettings; public list = ;
app.html
drag_handle {{row.item.$$expanded ? 'keyboard_arrow_down' : 'keyboard_arrow_right'}} Item: {{row.item.id}}
API
### Inputs
Name | Type | Default | Descirption |
---|---|---|---|
list | Array | Items which will be displayed in tree | |
template | TemplateRef | HTML template for tree item. Inside this template you can place directives (ngxNestableDragHandle and ngxNestableExpandCollapse). That will describe the custom look and position of these elements. Otherwise, the default functions are applied. |
#### options
Name | Type | Default | Descirption |
---|---|---|---|
fixedDepth | boolean | false | Constaint items to keep their initial depth |
maxDepth | number | 5 | Maximum nested depth |
threshold | number | 20 | Distance in px after which horizontal movement (nesting) is applied. |
thresholdStyle | string | '20' | Gives padding to the tree, an empty string will result in no padding. |
disableDrag | boolean | false | Disable/enable drag event |
template | TemplateRef | HTML template for tree item. Inside this template you can place directives (ngxNestableDragHandle and ngxNestableExpandCollapse). That will describe the custom look and position of these elements, otherwise the default functions are applied. | |
childrensKey | string | 'Items' | Item's children object key name |
### Outputs
Name | Type | Descirption |
---|---|---|
drag | void | Emits event when item drag is started |
drop | void | Emits event when item is dropped |
disclosure | void | Emits event when item expand/collapse state is changed |
itemMouseenter | void | Emits on mouse enter on the item |
itemMouseleave | void | Emits on mouse leave on the item |
Authors
- Petar Markov - Initial work - Speculees
- Mihajlo Grubjesic - Initial work - Comi89
- Zlatomir Darabuc - Initial work - zlaayaa
License
This project is licensed under the MIT License - see the LICENSE.md file for details