{"id":15474775,"url":"https://github.com/courage007/angulartree","last_synced_at":"2025-04-22T14:08:27.390Z","repository":{"id":178195934,"uuid":"133753436","full_name":"courage007/AngularTree","owner":"courage007","description":"Developing a Tree  Component Based On Angular2+（基于Angluar2 开发的通用树组件）","archived":false,"fork":false,"pushed_at":"2018-11-08T12:05:33.000Z","size":285,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-22T14:08:18.885Z","etag":null,"topics":["angular","angular-cli","angular-component","angular-tree","angular-tree-component","component","ng2tree","tree","tree-component"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/courage007.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-05-17T03:25:27.000Z","updated_at":"2018-11-08T12:05:35.000Z","dependencies_parsed_at":null,"dependency_job_id":"2e3d4263-0d4e-47bd-9f2a-440b46a50301","html_url":"https://github.com/courage007/AngularTree","commit_stats":{"total_commits":54,"total_committers":1,"mean_commits":54.0,"dds":0.0,"last_synced_commit":"5fcc723a0270a230f8d7893831bb53fb38996324"},"previous_names":["courage007/angulartree"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/courage007%2FAngularTree","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/courage007%2FAngularTree/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/courage007%2FAngularTree/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/courage007%2FAngularTree/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/courage007","download_url":"https://codeload.github.com/courage007/AngularTree/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250255710,"owners_count":21400410,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-cli","angular-component","angular-tree","angular-tree-component","component","ng2tree","tree","tree-component"],"created_at":"2024-10-02T03:04:06.812Z","updated_at":"2025-04-22T14:08:27.384Z","avatar_url":"https://github.com/courage007.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Contents\n- [Introduction and Features](#introduction-and-features)\n- [Common Tree Component for Angular2 Plus](#common-tree-component-for-angular2-plus)\n\n# Introduction and Features\nUsing this Module you can utilize an Angular Tree Component in Angular 2+.  \nFeel free to contribute, raise feature requests and make it better. Here is the main Features:  \n**1. toggle: expand or collapse**  \n**2. active: active or deactive**  \n**3. focus: focus or blur**  \n**4. keys operations:down | up |  left | right | space | enter**  \n**5. node operation api: add node | remove node**  \n**6. contextmenu demo added by catching up with the ContextMenu event**\n\n# Common Tree Component for Angular2 Plus\n\n## Setup\n\n### Installation\n\n```\nnpm install ng2tree-common --save\n\n ```\n\n### Sample\n- (1) Include TreeModule in Main Module where you want to use the tree component.(eg: app.module.ts): \n```typescript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { TreeModule } from 'ng2tree-common';\n\nimport { AppComponent } from './app.component';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    TreeModule,\n    BrowserModule\n  ],\n  providers: [\n  ],\n  bootstrap: [\n    AppComponent\n  ],\n  entryComponents: [\n  ]\n})\nexport class AppModule { }\n```\n\n- (2) Create Editor options in component.(eg: app.component.ts)\n```typescript\nimport { Component } from '@angular/core';\n\nexport const DATA = [\n  {\n    id: 1,\n    name: 'root1',\n    subTitle: 'the root',\n    type: 'type1',\n    children: [\n        {\n            id: 2,\n            name: 'child1.1',\n            type: 'type2',\n            subTitle: 'a good child'\n        }\n    ]\n  },\n  {\n    id: 3,\n    name: 'root3',\n    subTitle: 'the third root',\n  }\n];\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.css'],\n  styles: [\n    `button: {\n      line - height: 24px;\n      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);\n      border: none;\n      border-radius: 2px;\n      background: #A3D9F5;\n      cursor: pointer;\n      margin: 0 3px;\n    }`\n  ],\n})\n\nexport class AppComponent {\n  title = 'app';\n  nodes = DATA ; // Outside static Data\n}\n\n```\n- (3) Include editor in html with options and ngModel bindings.(eg: app.component.html)\n```html\n  \u003cng2tree [nodes]=\"nodes\"\u003e\u003c/ng2tree\u003e\n```\n\n### Events\nOutput event (onToggle、onActivate、onDeactivate、onActiveChanged, ...) expose the tree instance that can be used for performing custom operations on it. \n```html\n  \u003cng2tree [nodes]=\"nodes\" (onToggle)=\"toggleEventHandler($event)\" (onActivate)=\"activateEventHandler($event)\"\n    (onDeactivate)=\"deactivateEventHandler($event)\" (onActiveChanged)=\"activeChangedEventHandler($event)\"\n    (onFocus)=\"focusEventHandler($event)\" (onBlur)=\"blurEventHandler($event)\" (onDoubleClick)=\"doubleClickEventHandler($event)\"\n    (onContextMenu)=\"contextMenuEventHandler($event)\"\n  \u003e\u003c/ng2tree\u003e\n```\n\n```typescript\nexport class AppComponent {\n  title = 'app';\n  nodes = DATA ; // Outside static Data\n\n  // 自定义事件处理器\n  toggleEventHandler = ($event) =\u003e console.log($event);\n  activateEventHandler = ($event) =\u003e console.log($event);\n  deactivateEventHandler = ($event) =\u003e console.log($event);\n  activeChangedEventHandler = ($event) =\u003e console.log($event);\n  focusEventHandler = ($event) =\u003e console.log($event);\n  blurEventHandler = ($event) =\u003e console.log($event);\n  doubleClickEventHandler($event){\n    console.log(\"Double Click Handler. The event is:\", $event);\n  }\n  contextMenuEventHandler = ($event) =\u003e console.log(\"Show ContextMenu:with or without custom contex menu\", $event);\n}\n```\n\n## Configurations\nThe ng2tree-common exposes api for user to customize his/her config.\n- (1) Create tree options in component.(eg: app.component.ts)\n```typescript\nexport class AppComponent {\n  nodes = DATA ; // Outside static Data\n  \n  // Custom Options\n  customTemplateStringOptions = {\n    allowDrag: false,\n    enableCustomContextMenu: false\n  }\n}\n\n```\n- (2) Using your custom options as the ng2tree-common's input.(eg: app.component.html)\n```html\n \u003cng2tree [nodes]=\"nodes\" [options]=\"customTemplateStringOptions\" \u003e\u003c/ng2tree\u003e\n```\n\n## License\n\nMIT © [John Wang](https://github.com/courage007)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcourage007%2Fangulartree","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcourage007%2Fangulartree","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcourage007%2Fangulartree/lists"}