Angular Diagram Component
How to integrate custom diagramming into your Angular-based web application. Painlessly.
The open-source web application framework Angular is a popular choice among web developers. There exist many accompanying component frameworks that facilitate the build of a modern web application. Its component-based approach allows creating use case specific components easily. For example, wrapping yFiles for HTML in an Angular component yields a graph visualization component with an easy to use interface, customizable visualization, and sophisticated layouts.
yFiles for HTML is a commercial programming library explicitly designed for diagram visualization. The built-in user input handling makes the diagram accessible with keyboard, mouse, or touch gestures. The diagram can be tailored to any domain with flexible style options. And its sophisticated layout algorithms easily create readable, pleasing, and informative networks.
Angular components typically use data binding to visualize business data that is associated with an element. The framework provides specific directives to bind data in templates easily.
These templates can be used to create dynamic, arbitrary element visualizations. For example, rendering node elements that are zoom-dependent to show the different detailed data:
In a component-based web application, data is usually passed to the component to create the diagram. Although yFiles for HTML can be directly attached to an asynchronous data provider, it is also possible to provide data objects (e.g., JSON) from which a diagram will be generated.
This allows defining an interface for the component that binds to the diagram data. Thus, all features of the yFiles diagramming library can be utilized on the data to create a perfectly tailored user experience.
Often, connected data does not contain positional information and relies on the user or the application to arrange the elements in a meaningful way.
yFiles’ sophisticated layout algorithms provide arrangements for many different use cases out of the box, each of which can be configured to match specific requirements.
yFiles for HTML comes with an Angular CLI Sample Application that shows how to integrate yFiles for HTML in an Angular project by simply adding yFiles as npm module dependency. yFiles for HTML can be used with any web framework and also comes with an AngularJS 1 Sample Application that demonstrates how to integrate yFiles for HTML in that framework.
The source code of these sample applications is part of the yFiles for HTML package and available on the yWorks Github repository:
Test the yFiles for HTML diagramming library with a 60-day, fully functional trial package. The recommended way to use yFiles for HTML in an Angular or AngularJS 1 application is shown by the Angular source code examples that are part of that package.
Download a trial version of yFiles for HTML.
Navigate to the source directory of the Angular CLI Sample Application or the AngularJS 1 Sample Application, respectively.
Inspect the sample application’s documentation and
copy its build configuration and its Angular diagram sample components to your project or
adjust its source code to match your requirements.