How do properly use css's "calc()' with ng-style

Question

I have the following inline-styling using Angular's ng-style and css's "calc()', but it didn't work. Can anyone tell me what's wrong?

// my jade file has a class named '.logo-area'. 
.logo-area(ng-style="{'right':'calc(100% -'+({{fixedWidth}}+'px') +')'}")

Solution 1

.logo-area(ng-style="{'right': 'calc(50% - '+{{fixedWidth}}+'px'+')'}")

Will solve the problem.

Solution 2

This worked for me in HTML with Angular 8

[ngStyle]="{'width': someAngularVariable +'px', 'left': 'calc(100% - ' +someAngularVariable + 'px)' }"

Comments

[Mr Lister]

You should explain why changing the percentage will solve the problem.

[semiintel]

The difference is a removed pair of parentheses.