https://github.com/courage007/angulartree
Developing a Tree Component Based On Angular2+（基于Angluar2 开发的通用树组件）
https://github.com/courage007/angulartree
angular angular-cli angular-component angular-tree angular-tree-component component ng2tree tree tree-component
Last synced: 7 days ago
JSON representation
Developing a Tree Component Based On Angular2+（基于Angluar2 开发的通用树组件）
- Host: GitHub
- URL: https://github.com/courage007/angulartree
- Owner: courage007
- License: mit
- Created: 2018-05-17T03:25:27.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-11-08T12:05:33.000Z (over 6 years ago)
- Last Synced: 2025-04-22T14:08:18.885Z (7 days ago)
- Topics: angular, angular-cli, angular-component, angular-tree, angular-tree-component, component, ng2tree, tree, tree-component
- Language: TypeScript
- Homepage:
- Size: 278 KB
- Stars: 4
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Contents
- [Introduction and Features](#introduction-and-features)
- [Common Tree Component for Angular2 Plus](#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):
```typescript
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)
```typescript
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)
```html
```
### Events
Output event (onToggle、onActivate、onDeactivate、onActiveChanged, ...) expose the tree instance that can be used for performing custom operations on it.
```html
```
```typescript
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)
```typescript
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)
```html
```
## License
MIT © [John Wang](https://github.com/courage007)