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

Viewed 318

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>
1 Answers

You can try something like:

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

Related