Looking for a way to dynamically load SVG items with ease.
The items needed are quite simple. Here's a basic template:
<svg:rect [attr.x]="x" [attr.y]="y" width="10" height="10" />
Component Class Example:
export class DraggableSvgItemComponent implements OnInit {
x: number = 0;
y: number = 0;
constructor() { }
ngOnInit() {
}
}
Showing how the container component template is structured:
<svg attr.height.px="{{height}}" attr.width.px="{{width}}">
<svg:g app-draggable-svg-item *ngFor="let d of draggables" />
</svg>
Here's the process used to generate the items from within the container component:
// commands <- load fun stuff with x and y coordinates
var toSet = new Array<DraggableSvgItemComponent>();
commands.forEach((value) => {
if (value instanceof ZPL2.GraphicShapeBase) {
var toAdd = new DraggableSvgItemComponent();
toAdd.x = value.x;
toAdd.y = value.y;
console.log(toAdd);
toSet.push(toAdd);
}
});
this.draggables = toSet;
Even though the console log confirms that x and y have non zero values like
DraggableSvgItemComponent {x: 100, y: 50}When placing the <rect> directly on the canvas without utilizing a separate component, it functions correctly. However, using a different component is necessary to handle various svg elements.
Any idea on what could be causing the issue with the value bindings?