Search code examples
angularng-style

Im trying to calc my div width on Angular NgStyle with 2 variables with different units

I am trying to make a width: calc() but i want to make a substract of 2 variables with different units but it doesnt show expected output.

[ngStyle]="{ 'width': calc(notHedgedProgress + '%' - newPositionX + 'px') }"

NotHedgedProgress and NewPositionX are numbers

as you can see im trying to substract a '%' unit variable with a 'px' one.

Solution

  • Your variables has to be interpolated and the style rule must be in the form of a string:

    [ngStyle]="{ 'width': 'calc(' + notHedgedProgress + '% - ' + newPositionX + 'px)' }"