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!

Answer 1

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

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

Answer 2

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 }}

Answer 3

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>