Currently, I am developing a web service using Angular and Spring Boot. In this project, I have implemented cdkDrag functionality to allow users to place images in specific locations within the workspace. My goal is to maintain the placement of these images even after a browser refresh. To achieve this, I am saving the coordinates of each image in the database after every drag and drop action. When the browser is refreshed, I retrieve the previous coordinates from a Router class:
export class Router implements Node {
id: string;
x: number;
y: number;
constructor() {
}
}
Here is some HTML code related to this process:
<mat-sidenav-content>
<a *ngFor="let router of routers">
<img id="node" src="assets/images/router.png" cdkDrag (click)="updateParameters($event, router)">
</a>
</mat-sidenav-content>'
My intention now is to dynamically set the margin-left property as router.x + "px" and margin-top property as router.y. However, my initial attempt using
style="margin-left: {{router.x}}px"