Angular Graph Component
How to integrate custom graph visualization components into your Angular-based web application. Easily.
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 graph, network, and diagram visualization. Note that the word "graph" refers to the mathematical graph with nodes and edges, rather than a function graph or bar charts, here. yFiles' built-in user input handling makes the graph visualization accessible with keyboard, mouse, or touch gestures. The graph visualization can be tailored to any domain with flexible style options. And its sophisticated layout algorithms easily create readable, pleasing, and informative graph visualizations.
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 graph visualization. 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 graph visualization will be generated.
This allows defining an interface for the component that binds to the graph data. Thus, all features of the yFiles graph 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.
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 graph visualization library with a fully functional trial package. The recommended way to use yFiles for HTML in an Angular 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.
Inspect the sample application’s documentation and
copy its build configuration and its Angular graph visualization sample components to your project or
adjust its source code to match your requirements.