Contents

• Introduction and Features
• Common Tree Component for Angular2 Plus

Introduction and Features

Using this Module you can utilize an Angular Tree Component in Angular 2+.
Feel free to contribute, raise feature requests and make it better. Here is the main Features:
1. toggle: expand or collapse
2. active: active or deactive
3. focus: focus or blur
4. keys operations:down | up | left | right | space | enter
5. node operation api: add node | remove node
6. contextmenu demo added by catching up with the ContextMenu event

Common Tree Component for Angular2 Plus

Setup

Installation

npm install ng2tree-common --save

Sample

• (1) Include TreeModule in Main Module where you want to use the tree component.(eg: app.module.ts):

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { TreeModule } from 'ng2tree-common';

import { AppComponent } from './app.component';

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

• (2) Create Editor options in component.(eg: app.component.ts)

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

export const DATA = [
  {
    id: 1,
    name: 'root1',
    subTitle: 'the root',
    type: 'type1',
    children: [
        {
            id: 2,
            name: 'child1.1',
            type: 'type2',
            subTitle: 'a good child'
        }
    ]
  },
  {
    id: 3,
    name: 'root3',
    subTitle: 'the third root',
  }
];

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  styles: [
    `button: {
      line - height: 24px;
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
      border: none;
      border-radius: 2px;
      background: #A3D9F5;
      cursor: pointer;
      margin: 0 3px;
    }`
  ],
})

export class AppComponent {
  title = 'app';
  nodes = DATA ; // Outside static Data
}

• (3) Include editor in html with options and ngModel bindings.(eg: app.component.html)

  <ng2tree [nodes]="nodes"></ng2tree>

Events

Output event (onToggle、onActivate、onDeactivate、onActiveChanged, ...) expose the tree instance that can be used for performing custom operations on it.

  <ng2tree [nodes]="nodes" (onToggle)="toggleEventHandler($event)" (onActivate)="activateEventHandler($event)"
    (onDeactivate)="deactivateEventHandler($event)" (onActiveChanged)="activeChangedEventHandler($event)"
    (onFocus)="focusEventHandler($event)" (onBlur)="blurEventHandler($event)" (onDoubleClick)="doubleClickEventHandler($event)"
    (onContextMenu)="contextMenuEventHandler($event)"
  ></ng2tree>

export class AppComponent {
  title = 'app';
  nodes = DATA ; // Outside static Data

  // 自定义事件处理器
  toggleEventHandler = ($event) => console.log($event);
  activateEventHandler = ($event) => console.log($event);
  deactivateEventHandler = ($event) => console.log($event);
  activeChangedEventHandler = ($event) => console.log($event);
  focusEventHandler = ($event) => console.log($event);
  blurEventHandler = ($event) => console.log($event);
  doubleClickEventHandler($event){
    console.log("Double Click Handler. The event is:", $event);
  }
  contextMenuEventHandler = ($event) => console.log("Show ContextMenu:with or without custom contex menu", $event);
}

Configurations

The ng2tree-common exposes api for user to customize his/her config.

• (1) Create tree options in component.(eg: app.component.ts)

export class AppComponent {
  nodes = DATA ; // Outside static Data
  
  // Custom Options
  customTemplateStringOptions = {
    allowDrag: false,
    enableCustomContextMenu: false
  }
}

• (2) Using your custom options as the ng2tree-common's input.(eg: app.component.html)

 <ng2tree [nodes]="nodes" [options]="customTemplateStringOptions" ></ng2tree>

License

MIT © John Wang