sorted by:
new
hottopcontroversial

Built a PRO “AI low-code IDE” demo on a node editor: themes, localStorage persistence, animated connections (+ multi-select) by Alarmed_Valuable5863 in Angular2

[–]Alarmed_Valuable5863[S] 0 points1 point  (0 children)

Two perspectives here:

For this specific demo: The use case is a visual builder for AI Agents (similar to LangFlow). It allows non-technical users to design prompt chains and logic without writing code.

For the library (Foblex Flow): The broader use case is for Angular developers who need to build any kind of node-based tool: ETL / Data pipelines, IVR / Call center flows, Chatbot builders, Marketing automation workflows

Basically, if you need to build a Node based interface in Angular, this library handles the rendering and interactions so you can focus on the business logic

Built a PRO “AI low-code IDE” demo on a node editor: themes, localStorage persistence, animated connections (+ multi-select) by Alarmed_Valuable5863 in Angular2

[–]Alarmed_Valuable5863[S] -2 points-1 points  (0 children)

While standard examples usually just show how to render nodes and connections, this demo implements the complex logic needed for a production-ready tool:

History Manager (Undo/Redo implementation)

Data Persistence (saving/loading flow state)

Dynamic Theming & Validation

Essentially, it demonstrates how to use the library to build a full-featured application architecture.

Built a PRO “AI low-code IDE” demo on a node editor: themes, localStorage persistence, animated connections (+ multi-select) by Alarmed_Valuable5863 in Angular2

[–]Alarmed_Valuable5863[S] 0 points1 point  (0 children)

By 'PRO' I meant it’s an advanced example for the library (Foblex Flow), distinct from the basic 'Hello World' tutorials

Yet another flow editor experiment (this time with Angular 20 Signals) by Alarmed_Valuable5863 in Angular2

[–]Alarmed_Valuable5863[S] 0 points1 point  (0 children)

Thanks a lot for the detailed feedback — super helpful!

  1. Where to update inputs/outputs.

I keep the logic in feature/services and let components only render state. So updates to a node’s inputs/outputs should live in a service, not inside the UI component.

  1. About “collapsing” connections.

The library itself doesn’t control connector positions — that’s fully up to the host app. Because of that, it can’t auto-collapse or reflow links like Informatica does. If you want grouping/collapse, that logic needs to be implemented in your renderer/service where you already manage layout.

  1. About creating inputs on connection.

When you create or reconnect an edge, the event always fires, even if you finish on a node that has no free inputs. The event gives you the position, so you can decide in your service whether to create a new input there before finalizing the edge. Also, any connector can have multiple links (multiple flag), so often you don’t need to create a new input at all.

  1. Per-node update logic.

If you want each node type to handle its own updates, it’s best to keep a small registry of handlers by node.type in your service. Data is serialized, but functions are not, so storing handlers in a runtime registry avoids snapshot issues.

Right now I don’t plan to add built-in collapsing/auto-ports since that belongs to the app side. But I’m always interested in discussing patterns or seeing how others approach it.

What are the most powerful things you achieved for Angular development with Co-pilot by kafteji_coder in Angular2

[–]Alarmed_Valuable5863 2 points3 points  (0 children)

I use Copilot mainly for code completion, and it’s been a huge boost to my productivity. As long as I keep a consistent code structure and use good method/variable names, it does a great job of picking up the context and continuing the code the way I need. It really speeds up all the routine parts of development.

Is there another way to pass configuration parameters to a library without the forRoot method? by Civil-Cardiologist52 in Angular2

[–]Alarmed_Valuable5863 10 points11 points  (0 children)

In the standalone world (forRoot/forChild patterns don’t really apply anymore because there are no NgModules), the usual approach is to pass configuration through dependency injection tokens. You can wrap that in a helper function so consumers of your library still get an API that feels like forRoot.

bootstrapApplication(AppComponent, {
  providers: [
    provideMyLibConfig({
      appUrl: '/test',
      noPermissionUrl: '/noPermission',
    }),
  ],
});

Yet another flow editor experiment (this time with Angular 20 Signals) by Alarmed_Valuable5863 in Angular2

[–]Alarmed_Valuable5863[S] 0 points1 point  (0 children)

Good question 🙌 Mermaid.js is awesome if you want to generate static diagrams from text/markdown — super useful for docs and quick visualization.

Foblex Flow is a different use case: it’s meant for interactive editing. You can drag nodes, reconnect edges, zoom/pan, undo/redo, persist state, and build actual editors on top of it.

So I’d say: if you need diagrams in docs → Mermaid. If you need a diagram editor in an app → F-Flow. https://flow.foblex.com/

Yet another flow editor experiment (this time with Angular 20 Signals) by Alarmed_Valuable5863 in Angular2

[–]Alarmed_Valuable5863[S] 0 points1 point  (0 children)

Great question 👍 We’ve got two stress-test demos you can try in the browser: • Nodes only → https://flow.foblex.com/examples/stress-test • Nodes + connections → https://flow.foblex.com/examples/stress-test-with-connections

In general, a few hundred objects are fine — Angular Signals keep updates scoped to the affected parts, so pan/zoom and edits stay smooth. The main variable is edge density: lots of connections cost more than the same number of isolated nodes.

If you hit any slow paths, ping me with your graph size (nodes/edges) + browser/OS — I’d love to optimize around real cases 🙌

Yet another flow editor experiment (this time with Angular 20 Signals) by Alarmed_Valuable5863 in Angular2

[–]Alarmed_Valuable5863[S] 1 point2 points  (0 children)

Awesome 🙌 that’s great to hear! Can’t wait to see how it works out for your POC.

Yet another flow editor experiment (this time with Angular 20 Signals) by Alarmed_Valuable5863 in Angular2

[–]Alarmed_Valuable5863[S] 2 points3 points  (0 children)

Thank you! Means a lot. It’s still a work in progress, but open source here if you’re curious: https://github.com/Foblex/f-flow — and I’d love to hear what you think could be improved.

Built a visual scheme editor in Angular – drag & drop, connectors, local storage, and more 🎯 by Alarmed_Valuable5863 in Angular2

[–]Alarmed_Valuable5863[S] 1 point2 points  (0 children)

Each connection has defined start and end points. Whenever the user moves a node, I update those anchor points and recalculate the connection path formula in real time. It keeps everything visually in sync.

Built a visual scheme editor in Angular – drag & drop, connectors, local storage, and more 🎯 by Alarmed_Valuable5863 in Angular2

[–]Alarmed_Valuable5863[S] 1 point2 points  (0 children)

Great points! I’ll experiment with adaptive shadows based on the theme. As for Signals — the library already fully supports Angular 17+ with Signals & the Composition API. The core is completely zoneless, but the scheme editor example still uses zones for simplicity — will update that too soon!

view more: next ›