CODEWITHSUNDEEP
javascriptangularjsangular-translate
Luchnik
Luchnik

Reputation: 1087

Angular translate filter in ternary operator

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!

Upvotes: 28

Views: 19441

Answers (5)

Muhammad Bilal
Muhammad Bilal

Reputation: 1999

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

Upvotes: 1

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

Reputation: 148

If exist prefix

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

Upvotes: 0

Luchnik
Luchnik

Reputation: 1087

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>

Upvotes: 1

Kunvar Singh
Kunvar Singh

Reputation: 1885

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

Upvotes: 4

Suren Srapyan
Suren Srapyan

Reputation: 68635

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

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

Upvotes: 86

Related Questions