artbelikov / Angular2 Tree Diagram
Licence: mit
Angular Hierarchical UI module
Stars: ✭ 50
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Angular2 Tree Diagram
ng-treetable
A treetable module for angular 5
Stars: ✭ 32 (-36%)
Mutual labels: tree, angular2, tree-structure
Graphview
Flutter GraphView is used to display data in graph structures. It can display Tree layout, Directed and Layered graph. Useful for Family Tree, Hierarchy View.
Stars: ✭ 152 (+204%)
Mutual labels: tree, tree-structure, hierarchy
Ngx Smart Modal
Modal/Dialog component crafted for Angular
Stars: ✭ 256 (+412%)
Mutual labels: angular2, angular6
Codebe
CodeBe(码币)是一个是使用angular2整合各种插件的项目,包括(layer,bootstrap-table,markdown编辑器,highcharts,ckeditor,高德地图,fullcalendar 等等)。如果你有什么想要集成的插件,请告诉我,我来加进去。(请给我加个星,谢谢。)
Stars: ✭ 307 (+514%)
Mutual labels: angular2, angular6
Ngx Monaco Editor
Monaco Editor component for Angular 2 and Above
Stars: ✭ 347 (+594%)
Mutual labels: angular2, angular6
tree-json-generator
Simple JavaScript Tree Generator library
Stars: ✭ 13 (-74%)
Mutual labels: tree, tree-structure
angular-progress-bar
This component allow you to easy incorporate progress-bar to angular/ionic project, providing binding and color options
Stars: ✭ 26 (-48%)
Mutual labels: angular2, angular6
Wmderland
🌳 X11 tiling window manager using space partitioning trees
Stars: ✭ 341 (+582%)
Mutual labels: tree, tree-structure
react-treefold
A renderless tree component for your hierarchical React views
Stars: ✭ 37 (-26%)
Mutual labels: tree, tree-structure
Angular Draggable Mat Tree
Example implementation of drag and drop on Angular Material Tree
Stars: ✭ 47 (-6%)
Mutual labels: tree, angular6
Angular Material App
基于最新Angular 9框架与Material 2技术的web中后台前端应用框架。
Stars: ✭ 509 (+918%)
Mutual labels: angular2, angular6
React D3 Tree
🌳 React component to create interactive D3 tree graphs
Stars: ✭ 543 (+986%)
Mutual labels: tree, hierarchy
angular2-cookie-law
Angular2+ component that provides a banner to inform users about cookie law
Stars: ✭ 38 (-24%)
Mutual labels: angular2, angular6
angular-rollbar-source-maps
Angular 2+ implementation to upload sourcemaps to Rollbar
Stars: ✭ 17 (-66%)
Mutual labels: angular2, angular6
Angular-Movies
Angular Movies | TV Shows is a simple web app that consumes The Movie DB API - Angular 13 + Material Angular
Stars: ✭ 35 (-30%)
Mutual labels: angular2, angular6
react
Basic Primitives Diagrams for React. Data visualization components library that implements organizational chart and multi-parent dependency diagrams.
Stars: ✭ 15 (-70%)
Mutual labels: tree, hierarchy
Ng Http Loader
🍡 Smart angular HTTP interceptor - Intercepts automagically HTTP requests and shows a spinkit spinner / loader / progress bar
Stars: ✭ 327 (+554%)
Mutual labels: angular2, angular6
Angular Tree Component
A simple yet powerful tree component for Angular (>=2)
Stars: ✭ 1,031 (+1962%)
Mutual labels: tree, angular2
spring-websocket-angular6
Example for using Spring Websocket and Angular with Stomp Messaging
Stars: ✭ 18 (-64%)
Mutual labels: angular2, angular6
ng-toggle
Bootstrap-styled Angular Toggle Component
Stars: ✭ 14 (-72%)
Mutual labels: angular2, angular6
Angular tree diagram
About
This is Angular 2+ Hierarchical UI module.
Preview
Demo
On gh-pages
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
<tree-diagram [data]="data"></tree-diagram>
...
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
}
}
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].