The interpolated values get applied to the span text content of all ngfor elements

Question

I am retrieving the moved element top and left values and displaying it within the element, the issue is the top, left values of the current moved element modifies the span text top,left of all the elements.

Note : It modifies the span text(top,left values) of all the elements which I dont want . The top,left positions per say of element are correct that is not getting affected.

html

<div (mousemove)="documentMouseMove($event)" #parentparent>
<div id="toget" class="dropzone">

<div class="box"
     *ngFor="let existingZone of existingDroppedItemZoneIn">
       {{ existingZone }}
  <span>{{left}}</span>
  <span>{{top}}</span>
</div>

<div class="box"
     *ngFor="let box of dropzone1">
    {{ box.dis }}
  <span>{{left}}</span>
  <span>{{top}}</span>
</div>

</div>
</div>

ts Code

export class abcComponent {

urlFloorZoneIn: any;
roomsFloorZoneIn: any;
existingDroppedItemZoneIn: any[] = [];
@Input() urlFloorZone;
@Input() roomsFloorZone;
@Input() currentBoxFloorZone;
@Input() existingDroppedItem: any[] = [];

mouse = {
    x: null,
    y: null,
    down: false
  };
will_draw = false;
left;
top;
dropzone1 = [];
currentBox?: string = this.currentBoxFloorZone;

constructor(private dataService: DataService, private elRef: ElementRef) {
}


@ViewChild('parentparent') parentparent; 

@HostListener('mousedown', ['$event'])
onMousedown(event) {
    this.mouse.down = true;
}

@HostListener('mouseup', ['$event'])
onMouseup(event) {
    this.mouse.down = false;
}

documentMouseMove(e: MouseEvent) {
    // move logic
    if(!this.mouse.down) { return; }

    const container_rect = 
    this.parentparent.nativeElement.getBoundingClientRect();
    // relative to container, in px
    this.mouse.x = e.clientX - container_rect.left;
    this.mouse.y = e.clientY - container_rect.top;
    if(!this.will_draw) {
      requestAnimationFrame(this.draw.bind(this));
      this.will_draw = true;
    }

}

draw() {
    this.will_draw = false;
    const { width, height} = 
    this.parentparent.nativeElement.getBoundingClientRect();
    const perc_x = this.mouse.x / width * 100;
    const perc_y = this.mouse.y / height * 100;
    // -5 to center (elem has its width set to 10%)
    console.log('left', (perc_x - 5) + '%');
    this.left = perc_x - 7;
    // -5 to center (elem has its height set to 10%)
    console.log('top', (perc_y - 5) + '%');
    this.top = perc_y - 7;
}

ngOnInit() {}

ngOnChanges(changes: SimpleChanges) {
    if (changes.urlFloorZone && changes.urlFloorZone.currentValue) {
        this.urlFloorZoneIn = changes.urlFloorZone.currentValue;
    }
    if (changes.roomsFloorZone && changes.roomsFloorZone.currentValue) {
        this.roomsFloorZoneIn = changes.roomsFloorZone.currentValue
    }
    if(changes.existingDroppedItem && 
       changes.existingDroppedItem.currentValue){
        this.existingDroppedItemZoneIn = 
        changes.existingDroppedItem.currentValue;
    }        
}
}

Block 1 should show in its span text its respective top,left and Block 2 should show in its span text its respective top,left and so on

    ______________      ______________
    |            |      |            |
    |   1        |      |     2      |
    |  32.77 4.6 |      |   32.77 4.6|
    --------------      --------------

                  ______________
                  |            |
                  |      3     | 
                  |   32.77 4.6|
                  |____________|

Answer 1

The problem is that you are binding to a property that is for the entire scope of the page.

<span>{{left}}</span>

Instead, I'd make existingDroppedItemZoneIn a type with properties:

existingDroppedItemZoneIn[]: DropBox[] = new {[
   {left:0, top:0},
   {left:20, top: 0}
]};

And then you would want to bind to each box's attributes:

<div class="box" *ngFor="let box of dropzone1">
   {{ box.dis }}
   <span>{{box.left}}</span>
   <span>{{box.top}}</span>
</div>

And this is a quick pseudo-code example. So it likely isn't perfect.