Flex-layout: Can't use calc() on fxFlex Expression

[spottedmahn]

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

[sarora2073]

not sure if you can use a ternary operator there..does it work with a getter instead?

e.g.

get flexValue(): number {
return this.myCondition ? calc(55% - 3em) : 30;
}

[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 @sarora2073

FYI, this works:

get flexValue(){
   return this.myCondition ? 'calc(55% - 3em)' : 30;
}

stackblitz.com example

[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

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}