Angular advanced expression binding

Question

I'd like to bind an expression to button text that checks whether edit mode is enabled and based on that selects a string to translate and display. Here is my attempt:

<button ion-button block outline color="primary" type="submit" >{{editMode ?  "'EDIT_USER' | translate"  :  "'ADD_USER' | translate" }}</button>

This is the output text for the button - the string isn't translated and shown, but the literal value is shown:

'ADD_USER' | translate

Is there any way not to show the literal value but make it translate the string and then show it on the button?

How about that? {{(editMode ? 'EDIT_USER':'ADD_USER') | translate}} — Buczkowski
– Buczkowski, Commented Jun 21, 2018 at 13:05
Thank you, works! Why didn't you answer this question with this? Can't mark your somment as the correct answer. — Green Mint
– Green Mint, Commented Jun 21, 2018 at 13:07

DarthJDG · Accepted Answer · 2018-06-21 13:08:00Z

2

Enclose the value and the pipe in parentheses:

{{editMode ?  ('EDIT_USER' | translate) : ('ADD_USER' | translate)}}

Alternatively you can apply the ternary operator first and apply the pipe over the result:

{{(editMode ?  'EDIT_USER' : 'ADD_USER') | translate}}

answered Jun 21, 2018 at 13:08

DarthJDG

16.6k11 gold badges52 silver badges56 bronze badges

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

Comments

Willem van der Veen · Accepted Answer · 2018-06-21 13:17:01Z

In addition to DarthJDG's answer I would like to add why it is not working. In your code:

{{editMode ?  "'EDIT_USER' | translate"  :  "'ADD_USER' | translate" }}

The ternery value is evaluated and when editMode then turns out to be true Angular views the value "'EDIT_USER' | translate" as a string and not and expression.

Therefore in your code the literal string output was shown.

As DarthJDG stated the following fixes this:

{{editMode ?  ('EDIT_USER' | translate) : ('ADD_USER' | translate)}}

This is because now Angular is first applying the transfer pipe because the parentheses have the highest precendence. Then, after the translate pipe is executed the ternary expression is evaluted and the appropriate output is shown.

Hopefully this helps you getting a deeper understanding of your mistake.

Collectives™ on Stack Overflow

Angular advanced expression binding

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related