https://github.com/artem-mangilev/ngx-vflow
An open source library to build node-based UI with Angular 16+
https://github.com/artem-mangilev/ngx-vflow
Last synced: 4 months ago
JSON representation
An open source library to build node-based UI with Angular 16+
- Host: GitHub
- URL: https://github.com/artem-mangilev/ngx-vflow
- Owner: artem-mangilev
- License: mit
- Created: 2023-12-09T07:41:44.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-27T13:48:47.000Z (9 months ago)
- Last Synced: 2024-10-30T09:49:09.264Z (9 months ago)
- Language: TypeScript
- Homepage: https://www.ngx-vflow.org/
- Size: 6.68 MB
- Stars: 151
- Watchers: 6
- Forks: 10
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-node-based-uis - ngx-vflow - An open source library to build node-based UI with Angular (Javascript Libraries / Renderers)
- awesome-angular - ngx-vflow - An open source library to build node-based UI with Angular. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-vflow - An open source library to build node-based UI with Angular. (Table of contents / Third Party Components)
README
[](https://discord.gg/F6u2ZrMf) [](LICENSE)
---
`ngx-vflow` is an Angular library for creating node-based applications. It aims to assist you in building anything from a static diagram to a visual editor. You can utilize the default design or apply your own by customizing everything using familiar technologies.
## Installation
```
npm i ngx-vflow --save
```
## Version Compatibility
| ngx-vlow | Angular |
| -------- | --------- |
| v0.x | v16.2.0+ |
| v1.x | v17.3.12+ |
## Basic Example
The following code describes 3 nodes and creates 2 edges between them.
```ts
@Component({
template: ``,
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [Vflow],
})
export class DefaultEdgesDemoComponent {
public nodes: Node[] = [
{
id: '1',
point: { x: 10, y: 200 },
type: 'default',
text: '1',
},
{
id: '2',
point: { x: 200, y: 100 },
type: 'default',
text: '2',
},
{
id: '3',
point: { x: 200, y: 300 },
type: 'default',
text: '3',
},
];
public edges: Edge[] = [
{
id: '1 -> 2',
source: '1',
target: '2',
},
{
id: '1 -> 3',
source: '1',
target: '3',
},
];
}
```
The code above renders to this:
For more complex example you may see the documentation: https://www.ngx-vflow.org/
## API
`vflow` component API is described here: https://www.ngx-vflow.org/api/ngx-vflow/classes/VflowComponent
Host directives for `vflow` that you may find helpful:
- https://www.ngx-vflow.org/api/ngx-vflow/classes/ConnectionControllerDirective
- https://www.ngx-vflow.org/api/ngx-vflow/classes/ChangesControllerDirective
## License
MIT