@sergioblanco86/ngx-nestable

Angular Nestable List

ngx-nestable modified

Nestable list for Angular4 and beyond. This is a Angular adaptation of Jquery Nestable library. Demo This version has been modified to fit special necesities. The nested property 'children' has been chaged for 'properties'. Once you run NPM INSTALL then go to node_modules/ng-packagr, delete de node_modules folder, open package.json and remove all the ^ and ~ and then run NPM INSTALL here. There's an issue with this package.

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

import { NestableModule } from 'ngx-nestable';

@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, 'properties': [
        { 'id': 3 },
        { 'id': 4 },
        {
          'expanded': false,
          'id': 5, 'properties': [
            { '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.properties && row.item.properties.length; else empty_item" [ngxNestableExpandCollapse]="row">
      <mat-icon>{{row.item.$$expanded ? 'keyboard_arrow_down' : 'keyboard_arrow_right'}}
      </mat-icon>
    </button>
    
    <div>Item: {{row.item.id}}</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. 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

License

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

Acknowledgments

• Nestable