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: 2 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 (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-10-27T13:48:47.000Z (3 months ago)
• Last Synced: 2024-10-30T09:49:09.264Z (2 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
  • 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

        


---

`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

```

## Basic Example

The following code describes 3 nodes and creates 2 edges between them.

```ts

@Component({

  template: ``,

  changeDetection: ChangeDetectionStrategy.OnPush,

  standalone: true,

  imports: [VflowModule]

})

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