DXpopup position offset top relative to a variable

I'm trying to programmatically create a dx-popup in Angular4 with a custom offset from the top. Here's my code:

<dx-popup [position]= "{ my: 'left top', at: 'left top', offset: '0 100'}" [showTitle]="false" [dragEnabled]="false" [shading]="true" [height]="60" [shadingColor]= "'rgba(0, 0, 0, 0)'" [closeOnOutsideClick]="true" (onHidden)="closeMe()" [width] ="171" [(visible)]="isAlive">
</dx-popup>

This is working fine. The next step is to make the position > offset be setted from an @Input(). The variable is called offsetY. I've tried simply putting the var instead of the 100 like this:

[position]= "{ my: 'left top', at: 'left top', offset: '0 offsetY'}"

but the popup stick at 0 0 even tho offsetY = 150. Looking in the doc & forum of DevExtreme I couldn't find anything relevant about it.

Someone has an idea on how to do this?

1 Answer

You put offsetY variable inside a string. It wont be recognized. Try creating a string offsetY. So to achieve your functionality:-

[position]= "{ my: 'left top', at: 'left top', offset: offsetY}"

And in your component create a string,

offsetY: string = "0 150";

You can manipulate this string further for dynamic changes.