https://github.com/uiuniversal/ngu-flow
Angular flow diagram library
https://github.com/uiuniversal/ngu-flow
angular
Last synced: about 2 months ago
JSON representation
Angular flow diagram library
- Host: GitHub
- URL: https://github.com/uiuniversal/ngu-flow
- Owner: uiuniversal
- License: mit
- Created: 2023-08-04T11:42:23.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-09T13:26:52.000Z (7 months ago)
- Last Synced: 2025-04-07T02:11:12.507Z (2 months ago)
- Topics: angular
- Language: TypeScript
- Homepage: https://uiuniversal.github.io/ngu-flow/
- Size: 854 KB
- Stars: 39
- Watchers: 0
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - ngu-flow - Angular flow diagram library. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngu-flow - Angular flow diagram library. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngu-flow - Angular flow diagram library. (Table of contents / Third Party Components)
README
# Angular Flow
Angular Flow is a component that allows you to create a flow diagram using Angular.
Live Demo [link](https://uiuniversal.github.io/ngu-flow/)
Stackblitz Demo [link](https://stackblitz.com/edit/ngu-flow)
## Installation
```bash
npm install @ngu/flow
```
## Usage
```ts
import { Component } from "@angular/core";
import { FlowComponent, FlowChildComponent } from "@ngu/flow";
@Component({
selector: "app-root",
standalone: true,
imports: [FlowComponent, FlowChildComponent],
template: `
@for (item of lists; track item.id; let i = $index) {
{{ i }}
}
`,
styles: `
.flow {
min-height: 90vh;
background: #eee;
}
.child {
border: 1px solid #ccc;
width: 100px;
height: 50px;
background: white;
display: flex;
align-items: center;
justify-content: center;
}
`,
})
export class AppComponent {
lists = [
{ id: "1", x: 0, y: 0, deps: [] },
{ id: "2", x: 0, y: 0, deps: ["1"] },
];
}
```