ngx-treealize

• A simple component that renders a tree-like structure
• No predefined node template, so you can customize it for your business case
• Has ability to output events of the selected/clicked node
• Just one additional dependency. Small overhead.

Examples/Demo

Download or clone this repo and run npm i and npm start

Installation

npm i -S ngx-treealize

API

import { NgxTreealizeModule } from 'ngx-treealize'

@Inputs

| Input | Type | Required | Description | | ---------------- | ------- | -------------------------- | --------------------------------------------------------------------------------------------------------- | | nodes | TreeNode[] | YES | The nodes of the tree containing child nodes | | selectedNode | number | Optional | The id of the selected node | | treeTemplate | ElementRef | YES | The template of each node. Each template has ref to the node in obj called node |

@Outputs

| Output | Type | Required | Description | | ---------------- | ---------- | -------- | ------------------------------------------------------ | | selected | number | YES | emits the id of the selected node. |

Usage

1. Register the NgxTreealizeModule module in the module that you want to use it - feature or app.

import { NgxTreealizeModule } from 'ngx-treealize'

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxTreealizeModule } from 'ngx-treealize'
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    NgxTreealizeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

2. Use the lib in your template

 <ngx-treealize [nodes]="nodes" [treeTemplate]="template"></ngx-treealize>
 <ng-template #template let-node>
   {{node.label}}
 </ng-template>

import { Component } from '@angular/core';

@Component({
  selector: 'ngx-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  nodes = [{
    id: 1,
    label: 'Peter Swanson',
    children: [{
      id: 2,
      label: 'Gabriel Meshuggah',
      children: []
    }, {
      id: 4,
      label: 'Bratan Slaoich',
      children: [{
        id: 41,
        label: 'Plens Laid',
        children: []
      }]
    }]
  }, {
    id: 3,
    label: 'Peter Meterson',
    children: []
  }]
}

Build the NgxTreealizeModule module

Run ng build NgxTreealizeModule to build the library. The build artifacts will be stored in the dist/ngx-treealize directory. Use the --prod flag for a production build.