Call Center Flow Editor — now updated with Angular 20 & Signals 🚀

#angular #frontend #javascript #webdev

About a year ago I shared a small side project: a call center flow editor built on top of Foblex Flow.

The idea was simple — give users a way to design call flows visually by dragging nodes and connecting them, instead of writing configuration manually.

Since then, Angular has evolved, and so has this project. I wanted to take advantage of Angular 20 and its Signals APIs, so I decided to give the editor a proper refresh.

Version note — July 2026: The linked GitHub repository remains the historical Angular 20 / @foblex/flow 17.7.1 implementation described here. The current library release is 19.1.6. New projects should use the unified fConnector API; v19.1 also offers optional managed graph state through provideFFlow(withFlowState()). See the current Call Center example, connector migration guide, and managed state guide.

🔥 What’s New

Here’s what changed in this update:

Migrated the whole project to Angular 20
Rewritten state management on Signals → no external store, simpler and more reactive
Added a Light/Dark theme switch for a nicer editing experience
Added Undo/Redo (finally you can experiment without fear)
Improved overall UX (zooming, dragging and reconnecting nodes feels smoother)
Using Angular Material components for the interface

Demo & Source

👉 Live Demo

👉 Historical source code — Foblex Flow 17.7.1

⭐ Library: Foblex Flow

Reflections

Moving everything to Signals simplified the state logic a lot. Undo/redo was much easier to wire up, and persisting state in localStorage became almost trivial.

This was a good reminder that Angular’s ecosystem is evolving quickly — and Signals are already powerful enough to drive fairly complex interactive UIs.

Closing Thoughts

This project started as a small experiment, but it keeps evolving together with Angular. Signals made the code simpler and the editor itself more responsive.

I’m planning to keep polishing it, so feedback is always welcome 🙌

👉 Try the demo: https://flow.foblex.com/examples/call-center

And if you find this project useful, consider leaving a ⭐ on GitHub — it really helps!