https://github.com/artbelikov/angular2-tree-diagram
Angular Hierarchical UI module
https://github.com/artbelikov/angular2-tree-diagram
angular angular2 angular6 angular7 angular8 angular9 hierarchical hierarchical-data hierarchical-diagram hierarchy tree tree-structure typescript
Last synced: 10 months ago
JSON representation
Angular Hierarchical UI module
- Host: GitHub
- URL: https://github.com/artbelikov/angular2-tree-diagram
- Owner: artbelikov
- License: mit
- Created: 2017-08-03T18:35:07.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T02:17:22.000Z (over 3 years ago)
- Last Synced: 2025-04-24T04:37:39.029Z (12 months ago)
- Topics: angular, angular2, angular6, angular7, angular8, angular9, hierarchical, hierarchical-data, hierarchical-diagram, hierarchy, tree, tree-structure, typescript
- Language: TypeScript
- Homepage:
- Size: 3.4 MB
- Stars: 74
- Watchers: 6
- Forks: 40
- Open Issues: 37
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Angular tree diagram
### About
This is Angular 2+ Hierarchical UI module.
### Preview
### Demo
On [gh-pages](https://artbelikov.github.io/angular2-tree-diagram/)
### Features
- Drag and drop
- Zoom and pan
- Configurable node width/height
- Add/remove nodes
- Tree-like UI
- Pure CSS relation lines
- No dependencies
### Installation
```
npm i angular2-tree-diagram
```
### Usage
- Import module in your project
- Use tree-diagram directive
- Pass array of nodes and config
- See example.json for more details
### Example
```
...
data = {
json: [
{
"guid": "bc4c7a02-5379-4046-92be-12c67af4295a",
"displayName": "Elentrix",
"children": [
"85d412c2-ebc1-4d56-96c9-7da433ac9bb2",
"28aac445-83b1-464d-9695-a4157dab6eac"
]
},
...
],
config: {
nodeWidth: 200,
nodeHeight: 100
}
}
```