https://github.com/uiuniversal/ngu-flow

Angular flow diagram library
https://github.com/uiuniversal/ngu-flow

angular

Last synced: about 1 month 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 (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-08-25T13:49:29.000Z (4 months ago)
• Last Synced: 2024-08-25T15:03:16.352Z (4 months ago)
• Topics: angular
• Language: TypeScript
• Homepage: https://uiuniversal.github.io/ngu-flow/
• Size: 768 KB
• Stars: 38
• Watchers: 0
• Forks: 0
• 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"] },

  ];

}

```