namrata namrata - 24 days ago 12
TypeScript Question

Unable to bind Style.Top to clicked checkbox's coordinates using Angular2

When I click a checkbox, I need to get its coordinates and use those as another div's top and left so that I can display the div right where the checkbox was clicked.
I have captured the checkbox click event as follows:

HTML:

<input type="checkbox" [id]="item.Document.VENDOR_MAT" [checked]="isAddedInCompare(item.Document.VENDOR_MAT)" (change)="OnChangeUpdateProductCompareList(item.Document.VENDOR_MAT, $event)" (click)="onCompareClick($event)" /><label class="default-font" [attr.for]="item.Document.VENDOR_MAT" style="font-size:12px;margin-left:5px;">&nbsp;Compare</label>


Typescript:

onCompareClick(e) {
this.compareMessageTop = e.clientX;
this.compareMessageLeft = e.clientY;
}


This is setting the values.
But when I am trying to bind these values to div's style tag I see no change in its placement as per the coordinates of checkbox:

I am binding it as follows:

<div class="compareOverflowMessage" style="margin:0 0 0 0;height:20%;width:20%;" [style.top]="compareMessageTop" [style.left]="compareMessageLeft">


I also tried adding

this.checkboxClicked.emit(this.compareMessageTop);


in the onCompareClick(e) to see if it emits the top and atleast binds that correctly but no luck.

Please help!!
Thanks!

Answer
<input type="checkbox" #cb1 (click)="calcPos(cb1)">
<input type="checkbox" [style.top.px]="cb2Top" [style.left.px]="cb2Left" 
calcPos(element) {
  this.cb2Top = element.offsetTop + 20;
  this.cb2Left = element.offsetLeft + 10;
}