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
– I_sam

2021-02-12 11:04:52 +00:00
Commented Feb 12, 2021 at 11:04 — I_sam
– I_sam, Commented Feb 12, 2021 at 11:04

Lakshya Thakur · Accepted Answer · 2021-02-12 13:10:51Z

0

You can try something like:

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

edited Feb 12, 2021 at 13:10

Lakshya Thakur

8,3141 gold badge15 silver badges43 bronze badges

answered Feb 12, 2021 at 11:09

Yugi Oh

631 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

I_sam Over a year ago

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

Yugi Oh Over a year ago

That is impossible in angular, you can't use [..]={{..}} See: stackoverflow.com/questions/40203279/…

Roddy of the Frozen Peas Over a year ago

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.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related