Needlessly Promiscuous, Modularize!

    ng2tree-common
    TypeScript icon, indicating that this package has built-in type declarations

    2.3.0 • Public • Published

    Contents

    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

    Install

    npm i ng2tree-common

    DownloadsWeekly Downloads

    2

    Version

    2.3.0

    License

    MIT

    Unpacked Size

    987 kB

    Total Files

    62

    Last publish

    Collaborators

    • courage007