Angular and SVG
This sample has originally been developed for Magdeburger Dev Days 2018. I refreshed and extended the material for Techorama Netherlands 2018. The goal is to show how to use SVG + WebSockets in Angular projects.
The goal of this project is not to do a general SVG introduction. However, some people might not be that familiar with SVG. Therefore, use whats-svg.component.html to recap the SVG concepts that one needs to understand to be able to follow the Angular-related part of that talk.
- External vs. internal SVG sources - internal sources are important for Angular
- Style SVG with CSS
- How to work with transforms
- Animate SVG with CSS, discuss other options for animations
- Dashed lines in SVG
- Paths and arcs
Use attr-binding.component.html to discuss binding topics.
- Attribute binding instead of property binding
- Show that event binding just works
- Demonstrate the combination of CSS styling of SVG, class binding, and Angular to build a simple SVG-based control with clear view/logic separation
Building SVG-based Components
The component in budget-chart.component.ts shows how to build an SVG-based Angular directive.
- Use of attribute selector in component
svg:namespace for identifying SVG elements in Angular templates
@Inputdecorator for inpupt parameters
:host ::ng-deepin CSS (see project-list.component.css)
- Use component in parent SVG (see project-list.component.html) including data binding in a structural directive
The next sample brings everything together. It implements a silo element in a ficticious IoT visualization library. The element silo is a reusable component, uses Angular animations and supports context menus.
- Context menu with ngx-contextmenu
- Use of Angular Animations with SVG
- Using the component in a parent view (see animation.component.ts)
The last sample demonstrates the integration of SVG+Angular+Websockets. A demo server is regularly sending the fill state of a silo using WebSockets.