Can't use calc() on fxFlex Expression

Bug, feature request, or proposal:

Bug (or Feature request if it is not supposed to work this way)

What is the expected behavior?

That I can use calc() in a fxFlex expression: [fxFlex.xs]="myCondition ? calc(55% - 3em) : 30"

What is the current behavior?

<div fxFlex="15" class="sec1" [fxFlex.xs]="myCondition ? calc(55% - 3em) : 30">
  first-section
</div>

Template parse errors: Parser Error: Unexpected token Lexer Error: Invalid exponent at column 26 in expression [myCondition ? calc(55% - 3em) : 30]

What are the steps to reproduce?

stackblitz.com/edit/angular-flex-layout-expression-flex-calc

What is the use-case or motivation for changing an existing behavior?

Dynamically control fxFlex when using fxLayoutGap

[CaerusKaru]

It’s important to understand what this actually means:

• [fxFlex]="value" means that fxFlex gets bound to the value of value in the component.
• fxFlex="50" means that fxFlex gets bound to 50
• [fxFlex]="value ? 50 : 60" means that fxFlex will be either 50 or 60 based on the value of value. Note that 50 or 60 could be bound to other values, as you have in your StackBlitz example. The important thing is that the template parser interprets 50 or 60 as integer values
• [fxFlex]="value ? calc(50% - 1em) : 50". What’s happening here is the template parser is trying to parse calc(50% - 1em) as a variable reference.

The solution is to wrap it in a string, so that the directive knows that it’s just a string reference. Alternatively, you can bind this to a variable in the component.

[spottedmahn]

Thanks 🙏 @CaerusKaru

The solution is to wrap it in a string

Just to clarify “it”. You meant the calc function by it. I wasn’t sure what it was… took me a while to figure that out. I first tried the whole expression and that of course didn’t work.

I’m pretty sure you meant: [fxFlex]="value ? 'calc(50% - 1em)' : 50" will work.

---

To complete the circuit, if you will, I am able to do this:

<div fxFlex="15" class="sec1" [fxFlex.xs]="myCondition ? 'calc(55% - 3em)' : 30">
  first-section
</div>

stackblitz.com example