Angular translate filter in ternary operator

Question

I'm trying to translate my project into another language. I used angular translate library and provided an external JSON file with the translations. It looks like this:

{
  "hello_world": "Hola Mundo"
}

When I'm using it with simple hardcoded strings it works just fine and I get my correct translations:

<p>{{ "hello_world" | translate }}</p>

But how to deal with the ternary operator in code like this?

<button> {{ conditionValue ? 'Show' : 'Hide' }} </button>

How to change those 'Show' and 'Hide' values into a translation filter with Angular Translate? I tried different ways but I got an invalid syntax errors. Thanks!

Possible duplicate of [How do I used angularjs translator conditionally for HTML label](https://stackoverflow.com/questions/32781875/how-do-i-used-angularjs-translator-conditionally-for-html-label) — Thusitha, Sep 21 '17 at 18:12

score 83 · Accepted Answer · answered Sep 21 '17 at 18:07

83

I think if you wrap the ternary operator into (), it will work.

<button> {{ ( conditionValue ? 'Show' : 'Hide' ) | translate }} </button>

answered Sep 21 '17 at 18:07

Suren Srapyan

66,568
14
114
112

Kunvar Singh · Answer 2 · 2017-09-21T19:02:32.943

4

you may try for this:

here i make username online and offline when you choose soanish, the user online status will change into spnish based on ternary condition.

https://plnkr.co/edit/o16dpI?p=preview

[https://plnkr.co/edit/o16dpI?p=preview][1]

{{ ( userName ? 'Show' : 'Hide' ) | translate }}

edited Sep 21 '17 at 19:02

answered Sep 21 '17 at 18:21

Kunvar Singh

1,779
2
13
21

score 1 · Answer 3 · answered Sep 22 '17 at 05:43

I've just come up with the solution! For ternary operators we have to use 'translate' directive instead of filter. And it works just fine:

{
  "show_value": "Show",
  "hide_value": "Hide",
}

<button translate> {{ conditionValue ? "show_value" : "hide_value" }} </button>

score 1 · Answer 4 · answered Jun 10 '20 at 13:20

Here is your language JSON file

"CONFIGURATION": {
    "NEW_TEMPLATE": "New Template",
    "EDIT_TEMPLATE": "Edit Template"
}

CASE-I (With HTML tag)

<button> {{ ( variable === '5' ? 'CONFIGURATION.NEW_TEMPLATE' : 'CONFIGURATION.EDIT_TEMPLATE' ) | translate }} </button>

CASE-II (With some third party attribute)

<p-dialog header="{{(variable === '5' ? 'CONFIGURATION.NEW_TEMPLATE' : 'CONFIGURATION.EDIT_TEMPLATE') | translate}}">

score 0 · Answer 5 · answered Apr 07 '19 at 15:28

0

If exist prefix

{{ ('massmedias.' + (ctrl.actionType === 'add' ? 'add' : 'rename')) | translate }}

answered Apr 07 '19 at 15:28

Юрий Безруков

150
6

Angular translate filter in ternary operator

5 Answers5