How to use css calc() in angular style binding using variables from the component

Question

How do I use the Angular style binding syntax with the css calc() function for dynamically setting the width of an element.

With React I could simply write :-

<div style = {{
   width: `calc((${currentStep - 1 } * (100% / ${steps - 1})) - 6px)`
}}>

</div>

With Angular I want to accomplish the same thing :-

<div
[style.width] = `calc((${currentStep - 1 } * (100% / ${steps - 1})) - 6px)`
>
  
</div>

Thanks @AbuSufian, That dosen't work either. – I_sam Feb 12 '21 at 11:04 — I_sam, Feb 12 '21 at 11:04

score 0 · Answer 1 · edited Feb 12 '21 at 13:10

0

You can try something like:

[style. width]="getWidth(currentStep, steps)"

edited Feb 12 '21 at 13:10

Lakshya Thakur

answered Feb 12 '21 at 11:09

Yugi Oh

Thanks Yugi, That doesn't work either, how ever this approach works with ngStyle. But the problem is I want to use the [style.width[] approach without having a method in my class file – I_sam Feb 12 '21 at 11:17
1

That is impossible in angular, you can't use [..]={{..}} See: https://stackoverflow.com/questions/40203279/parser-error-got-interpolation-where-expression-was-expected – Yugi Oh Feb 12 '21 at 11:39
You can do `style.width="stuff with {{}}"`, though; it's just the [bracket\] syntax you can't use. But since you can't use the `calc` built-in, it doesn't really help matters. – Roddy of the Frozen Peas Feb 12 '21 at 13:20

1 Answers1