DXpopup position offset top relative to a variable

Question

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?

Answer 1

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.