Angular 2 - Jquery | Adding styles (top/left) with a mouse position

Question

I'm looking for a way to add a div component in Angular 2 at a specific place (mouse event x/y).

https://jsfiddle.net/lennartquerter/w2c7uqw6/

this.xPos = xPos;
this.yPos = yPos;

i pass the position into my reject class, but i do not know how to make styles out of it ? I checked angular docs but i can only set booleans and fixed css values / classes. I would like to do something like this:

[style]="rejectPosition"

this.rejectPosition = "left: " + this.xPos + "px ; top: " + this.yPos + "px;"

But its not possible. Is there a Angular 2 way to do this?

I found a way to do it without the reject Component, that just styles it inline with jQuery, but i do not like this approach.

Answer 1

[style.left.px]="xPos" [style.top.px]="yPos"