ngx-nestable-ukg

Angular Nestable List

ngx-nestable-ukg

Nestable list for Angular4 and beyond. This is a Angular adaptation of Jquery Nestable library. Demo

Features

Instalation

npm i ngx-nestable-ukg --save

Implementation

app.module.ts

import { NestableModule } from 'ngx-nestable-ukg';

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

app.component.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

  <ngx-nestable [(list)]="list" [options]="options" [template]="itemTemplate">
  </ngx-nestable>
  
  <ng-template #itemTemplate let-row>
    <button mat-icon-button [ngxNestableDragHandle]="row">
      <mat-icon>drag_handle</mat-icon>
    </button>
    
    <button mat-icon-button *ngIf="row.item.children && row.item.children.length; else empty_item" [ngxNestableExpandCollapse]="row">
      <mat-icon>
      </mat-icon>
    </button>
    
    <div>Item: </div>
  </ng-template>

  <ng-template #empty_item>
    <span style="width: 40px"></span>
  </ng-template>

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

License

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

Acknowledgments