Developing a Tree Component Based On Angular2+(基于Angluar2 开发的通用树组件)
MIT License
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
npm install ng2tree-common --save
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 { }
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
}
<ng2tree [nodes]="nodes"></ng2tree>
Output event (onToggleonActivateonDeactivateonActiveChanged, ...) 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);
}
The ng2tree-common exposes api for user to customize his/her config.
export class AppComponent {
nodes = DATA ; // Outside static Data
// Custom Options
customTemplateStringOptions = {
allowDrag: false,
enableCustomContextMenu: false
}
}
<ng2tree [nodes]="nodes" [options]="customTemplateStringOptions" ></ng2tree>
MIT John Wang