Ngx-tree

Ngx-tree is a custom Angular package that provides a tree component for displaying hierarchical data in a collapsible, expandable, and customizable format, making it easier for users to navigate and interact with the data. It offers various features such as drag and drop and keyboard navigation, and can be easily integrated into Angular applications.

Installation

Add NgxTreeModule to your AppModule:

...
import { NgxTreeModule } from '@talrace/ngx-tree';
...

@NgModule({
    ...
    imports: [
        ...
        NgxMediaModule,
        ...
    ],
    ...
})
export class AppModule {}

Usage

Template

<tlr-flat-tree
    [isEditMode]="true"
    [title]="title"
    [menuTitle]="menuTitle"
    [data]="data"
    [selectedItem]="selectedItem | async"
    [canAddChild]="true"
    [canEdit]="true"
    [canDelete]="true"
    [canDuplicate]="true"
    [emptyTitle]="emptyTitle"
    (createItem)="addNewItem($event)"
    (editItem)="onEditItem($event)"
    (deleteItem)="onDeleteItem($event)"
    (moveItemAbove)="onMoveItemAbove($event)"
    (moveItemBelow)="onMoveItemBelow($event)"
    (moveItem)="onMoveItem($event)"
    (selectItem)="onSelectItem($event)"
    (duplicateItem)="onDuplicateItem($event)">
</<tlr-flat-tree>

Ts controller

...
import { TreeNodeModel } from '@talrace/ngx-tree/src';
...
    data = new BehaviorSubject<TreeNodeModel[]>([]);

    selectedItem = new BehaviorSubject<TreeNodeModel>(new TreeNodeModel());
    
    title = 'Add new item';
    
    menuTitle = 'item';
    
    emptyTitle = 'New Page';

    addNewItem(node?: TreeNodeModel): void {
        //implementation
    }

    onDuplicateItem(node: TreeNodeModel): void {
        //implementation
    }

    onEditItem(node: TreeNodeModel): void {
        //implementation
    }

    onDeleteItem(node: TreeNodeModel): void {
        //implementation
    }

    onMoveItemAbove(item: any): void {
        //implementation
    }

    onMoveItemBelow(item: any): void {
        //implementation
    }

    onMoveItem(item: any): void {
        //implementation
    }

    onSelectItem(node: TreeNodeModel): void {
        //implementation
    }
...