Angular Demo

This demo shows the integration of yFiles for HTML with Angular.

How this demo was created

The structure of this demo was created using Angular CLI with the --minimal option, which skips scaffolding testing and git integration. Afterwards, the two TypeScript configuration files ./tsconfig.json and ./src/tsconfig.app.json were merged into a single file: ./src/tsconfig.json. This is so that IDEs like WebStorm and Visual Studio Code can provide better code completion and error messages, as they only recognize TypeScript configuration files if their name is exactly tsconfig.json (WebStorm issue, VSCode issue).

Then, several Angular components (graph-component, properties-view, graph-overview, context-menu, tooltips) were generated using the Angular CLI with the command ng generate component [component-name].

Integrating yFiles

To include the library css file, it was added to the styles array in angular.json. The license files can be imported in the main.ts file.

To run and build the app, you can use the regular ng serve and ng build commands.

This demo uses Angular Zoneless change detection and Signals. If you depend on Zone.js, please see an older version of this demo.

App Generator

Use the App Generator to create visualization prototypes – quickly and easily.