Foblex Flow is a flexible library for Angular, designed for creating interactive graphs and diagrams. This guide will assist you in integrating Foblex Flow into your project and leveraging its unique features.
To install Foblex Flow, run the following command in your Angular project:
npm install @foblex/flow
This command will add Foblex Flow to your package.json and offer to create a default theme.
Add the f-flow component to your HTML template:
f-flow component acts as the primary container, managing the layout and interactions of all child visualization components within the flow.
f-canvas component within f-flow component provides the foundation for placing other components such as nodes and connections.
f-connection component creates a visual link between fNodeOutput and fNodeInput directives. In this case, it connects a output with fOutputId="1"
to an input with fInputId="2"
.
fNode directive represents a node in the flow and can be configured using properties like fNodePosition to define its position.
The fNodeOutput and fNodeInput directives inside the nodes define connection points (outputs and inputs respectively) for establishing connections.
Conclusion
Foblex Flow is a powerful tool for creating complex graphical interfaces in Angular. For more information on the capabilities and components of the library, refer to the Foblex Flow documentation.