ng2-treeview

Angular2 component for displaying tree structures.

Installation

Via npm:

npm i ng2-treeview

Packaged version contains bundles/ng2-treeview.js SystemJS bundle. Add

var bundles = {
    '/vendor/ng2-treeview.js': ['ng2-treeview']
};

var config = {
    bundles: bundles,
    // ... other Angular2 configuration
};
System.config(config);

Import package:

import {TextTreeNode, TreeViewComponent} from 'ng2-treeview';

Examples

This package allows three ways of creating tree structures:

• text nodes - each tree node is just a text
• component nodes - each tree node is a custom Angular2 component
• ng-content nodes (not implemented yet) - each tree node clones content of ng-content

1. Text nodes

See demo project for complete example:

import {TextTreeNode, TreeViewComponent} from 'ng2-treeview';

@Component({
    selector: 'demo',
    directives: [TreeViewComponent],
    template: `
        <h1>ng2-treeview - Text nodes</h1>
        <ng2-treeview [node]="textTreeView" (textNodeClick)="onTextNodeClick($event)"></ms-treeview>
    `
})
export class DemoComponent {
    textTreeView = new TextTreeNode('Root node', null, [
        new TextTreeNode('Child node #1'),
        new TextTreeNode('Child node #2'),
        new TextTreeNode('Child node #3'),
        new TextTreeNode('Child node #4', null, [
            new TextTreeNode('Hello'),
            new TextTreeNode('Ahoy'),
            new TextTreeNode('Hola'),
        ]),
        new TextTreeNode('Child node #5'),
    ]);
    
    onTextNodeClick(event) {
        console.log(event);
    }
}