ngx-nestable-list

This library provides an Angular nestable list component for displaying a hierarchy of items.

Installation

To install ngx-nestable-list, run the following command in your terminal:

npm install ngx-nestable-list

Inputs

• items: An array of items to display in the nestable list. Each item should have a property to use as the item's label, and another property for the item's children.
• bindLabel: (optional, default 'name') The name of the property of the item to use as the label.
• bindChildren: (optional, default 'children') The name of the property of the item that contains the item's children.
• selectable: (optional, default false) Indicates if selecting items in the nestable list is allowed.
• customClass: (optional) A CSS class to apply to the nestable list component.
• itemCustomClass: (optional) A CSS class to apply to each item in the nestable list.
• onlyLeaves: (optional, default false) Indicates if only items without children can be selected.

Outputs

• itemClick: An event emitted when an item in the nestable list is clicked. The event includes the selected item.

Templates

• itemTpt: (optional) A template to use for rendering each item in the nestable list. If not provided, a default template will be used that displays the item's label.

Example usage

<ng80-nestable-list [items]="items" (itemClick)="onItemClick($event)">   <ng-template let-item="item" nestableListItemTpt>     {{ item.name }} ({{ item.id }})   </ng-template> </ng80-nestable-list>

Support

If you find this library helpful and want to support its development, consider buying me a coffee. Thank you for your support!

About the author

Carlos Morcillo is a web developer and open source contributor. You can find more of his work on this website.