NG Tree View Component

A reusable and customizable Angular tree view component with search, multi-select, and tri-state checkboxes.

Features

• Multi-level tree structure
• Tri-state checkboxes (checked, indeterminate, unchecked)
• Search functionality
• Expand/collapse nodes
• Select/deselect items
• Works with large datasets
• Customizable styles
• Uses Depth-First Traversal (DFS) for efficient tree processing

Installation

First, install the package using npm:

npm install ng-tree-view

Usage

Import the Module

Instead of manually handling providers, simply import the NgTreeViewModule into your application:

Option 1: Using an Angular Module

iI
 @NgModule({
  imports: [NgTreeViewModule],
})
export class AppModule {}

Option 2: Standalone Angular Application

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { NgTreeViewModule } from 'ng-tree-view';

bootstrapApplication(AppComponent, {
  providers: [NgTreeViewModule],
});

Use the Component

In any component template:

<app-ng-tree-view [treeData]="treeNodes" (valueChange)="onSelectionChange($event)"></app-ng-tree-view>

Input Properties

| Input | Type | Description | | ------------- | ------------------------ | ------------------------------------------ | | treeData | TreeNode[] | The hierarchical tree data | | placeholder | string | Placeholder text when no selection is made | | style | { [key: string]: any } | Custom styles for the dropdown |

Output Events

| Event | Type | Description | | ------------- | ------------------------ | ------------------------- | | valueChange | EventEmitter<string[]> | Emits the selected values |

Tree Node Interface

export interface TreeNode {
  title: string;
  value: string | number;
  key: string;
  children?: TreeNode[];
  expanded?: boolean;
  checked?: boolean;
  indeterminate?: boolean;
  userToggled?: boolean;
}

Example Tree Data

this.treeNodes = [
  {
    key: 'parent-1',
    value: '1',
    title: 'Parent Node',
    children: [
      { key: 'child-1', value: '1.1', title: 'Child Node 1' },
      { key: 'child-2', value: '1.2', title: 'Child Node 2' },
    ],
  },
  {
    key: 'parent-2',
    value: '2',
    title: 'Another Parent',
    children: [
      { key: 'child-3', value: '2.1', title: 'Child Node 3' },
    ],
  },
];

Customization

You can override styles in your global CSS or SCSS file:

/* Customize background color */
.ng-tree-view-container {
  background-color: #f8f9fa;
}

/* Change the selected item color */
.ng-tree-view-item.selected {
  background-color: #4a90e2;
  color: white;
}

/* Modify checkbox styles */
.ng-tree-view-checkbox {
  accent-color: #4a90e2;
}

Contributing

Feel free to submit pull requests or report issues on GitHub.

Troubleshooting

• Component not rendering? Ensure treeData is properly structured.
• Styles not applied? Check that your global styles allow external component styles.
• Checkboxes not working? Ensure [(ngModel)] is correctly bound to the checked property of tree nodes.