The mousemove event throws error in angular

问题:

I am trying to calculate the top and left of *ngfor elements wrt to parent element The mousemove function throws me an error.

I tried referencing the parent element to capture the mousemove

private elem;
private container;
private mouse = {
  x: null,
  y: null,
  down: false
};
private will_draw = false;

@ViewChild('parentcontainer') flo;

ngAfterViewInit() {
  this.elem = this.elRef.nativeElement.querySelector('box');
  this.container = this.elRef.nativeElement.querySelector('dropzone');
}

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

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

@HostListener('flo:mousemove', ['$event'])
documentMouseMove(e: MouseEvent) {
  // move logic
  if (!this.mouse.down) { return; }

  const container_rect = this.container.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);
    this.will_draw = true;
  }

}

draw() {
  this.will_draw = false;
  const { width, height } = this.container.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) + '%');
  // -5 to center (elem has its height set to 10%)
  console.log('top', (perc_y - 5) + '%');
}

HTML:

<div id="toget"
     #parentcontainer
     class="dropzone">
  <div class="box"
       appMovable
       *ngFor="let existingZone of existingDroppedItemZoneIn">
    {{ existingZone }}
    <span>{{leftvalue}}</span>
    <span>{{topvalue}}</span>
  </div>

  <div class="box"
       #bo
       *ngFor="let box of dropzone1"
       appDroppable
       (dragStart)="currentBox = box"
       appMovable>
    {{ box.dis }}
    <span>{{leftvalue}}</span>
    <span>{{topvalue}}</span>
  </div>
</div>

The objective is to trigger mousemove event and calculate top and left value of ngfor elements To listen to mouseup, mousedown , mousemove