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.
The build process uses a custom webpack configuration file with the help of the
@angular-builders/custom-webpack:browser builder. This allows the use of the
@yworks/optimizer package in
production, and a separate yFiles chunk.
To run and build the app, you can use the regular ng serve and
ng build commands.
App Generator
Use the
App Generator
to create visualization prototypes – quickly and easily.