Angular Nestable List

ngx-nestable

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 --save
`

Implementation

app.module.ts

`ts
import { NestableModule } from 'ngx-nestable';

@NgModule({
imports: [NestableModule],
bootstrap: [AppComponent]
})
export class AppModule {}
`

app.component.ts
`ts
public options = {
fixedDepth: true
} as NestableSettings;
public list = [
{ 'id': 1 },
{
'expanded': true,
'id': 2, 'children': [
{ 'id': 3 },
{ 'id': 4 },
{
'expanded': false,
'id': 5, 'children': [
{ 'id': 6 },
{ 'id': 7 },
{ 'id': 8 }
]
},
{ 'id': 9 },
{ 'id': 10 }
]
},
{ 'id': 11 }
];
`

app.html
`html





drag_handle



{{row.item.$$expanded ? 'keyboard_arrow_down' : 'keyboard_arrow_right'}}








``

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. Also gives padding to the tree.
| 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.

### 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

Authors

Petar Markov - Initial work* - Speculees
Mihajlo Grubjesic - Initial work* - Comi89
Zlatomir Darabuc - Initial work* - zlaayaa

Thank you

* Bernardo Peña updates and fixes

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

* Nestable