Angular 2 [style.margin-top]

As far as I know, you cannot get value from using directive [style.height.px], your best option is using direct access to the DOM using ElementRef and then access its height property, and used it in your calculation


The proper node's style margin-top property is marginTop, but you cannot do it like this. You should access style in your component and retrieve height property first yo use it in your template.

As you use an *ngFor loop, you can do it by adding a template variable to image and passing it to some method that returns its height. Like this:

<div *ngFor="let data of dataPost>
    <img #img [style.marginTop.px]="getImgMarginTop(img)" src="http://image-src.png">
</div>

Then add to your component a method that returns your image height.

  getImgMarginTop(img) {
    return img.style.marginTop - img.clientHeight
  }

Tags:

Angular