https://github.com/foblex/f-flow-example
This is an example of using the @foblex/flow library in an Angular project.
https://github.com/foblex/f-flow-example
Last synced: 9 months ago
JSON representation
This is an example of using the @foblex/flow library in an Angular project.
- Host: GitHub
- URL: https://github.com/foblex/f-flow-example
- Owner: Foblex
- License: mit
- Created: 2024-03-25T23:05:04.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-01-16T19:10:26.000Z (over 1 year ago)
- Last Synced: 2025-04-09T20:12:07.105Z (over 1 year ago)
- Language: TypeScript
- Homepage: https://foblex.github.io/f-flow-example/
- Size: 4.91 MB
- Stars: 25
- Watchers: 5
- Forks: 10
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# 📞 CallCenter Flow Example
An example project demonstrating how to use [@foblex/flow](https://github.com/Foblex/f-flow) with **Angular 20**.
The app is built entirely on **Angular Signals**, supports **state persistence in LocalStorage**, and comes with **light & dark themes** powered by **Angular Material**.
👉 [Live Demo](https://foblex.github.io/f-flow-example)
---
## 🚀 Features
- ⚡ **Signals-first** architecture – state management powered by Angular Signals
- 💾 **LocalStorage auto-save** – keep your flow even after refresh
- 🌗 **Light & Dark themes** – switch seamlessly
- 🎨 **Angular Material** integration
- 🌀 **Zoom** (mouse wheel, double-click, and buttons)
- 🖱 **Element selection** (single & multiple with `Shift`)
- 🔗 **Create and edit connections**
- 🏷 **Connection markers**
- 📐 **Segment connection type**
- 📍 **Fixed connection behavior**
- 🧩 **Drag & drop new nodes** from the palette
- 🌌 **Draggable background**
---
## 📦 Installation
Clone the repo and install dependencies:
```bash
git clone https://github.com/Foblex/f-flow-example.git
cd f-flow-example
npm install
```
---
## 🛠 Development server
Run the dev server with:
```bash
ng serve
```
Navigate to 👉 `http://localhost:4200/`
The app will automatically reload when you change source files.
---
## 📚 Powered By
- [@foblex/flow](https://github.com/Foblex/f-flow) – a flexible and powerful library for building interactive flow diagrams
---
## 📜 License
This example is distributed under the **MIT License**.
See the [LICENSE](LICENSE) file for details.