Angular ngx-translate - check if translation key exists directly in HTML template

Question

I want to translate some values in my Angular HTML template using ngx-translate and | translate pipe. At the moment my code looks like this:

<div>
{{equipment.type.name}}
</div>

where equipment is an object from component.ts. So only a name of the eqipment type is being displayed.

What I want to acheive is to translate these types of equipment, so I added some translations to my i18n json file:

  "EQUIPMENT-TYPE": {
    "chair": "Chair",
    "table": "Table",
  }

I have modified my HTML template as below:

<div>
{{'EQUIPMENT-TYPE' + equipment.type.name | translate}}
</div>

and it actualy works, but only when there is a translation added to the i18n json files.

My question is: Is it possible to check if a specific translation key exists in the json file and if not, to dsplay just a name of the equipment type?

Below code doesn't work, it always tries to translate the key, even if it doesn't exists:

<div>
{{ ('EQUIPMENT-TYPE' + equipment.type.name) ?  ('EQUIPMENT-TYPE' + equipment.type.name | translate) : equipment.type.name }}
</div>

Fateh Mohamed Fateh Mohamed · Accepted Answer · 2020-06-26T08:08:00

in ngx-translate if translation does not exist the string of the key will be retured directly, so try this :

{{ ('EQUIPMENT-TYPE' + equipment.type.name | translate) !== 'EQUIPMENT-TYPE' + equipment.type.name  ?  ('EQUIPMENT-TYPE' + equipment.type.name | translate) : equipment.type.name }}

if the translation does not exist translateService will return the string directly, so

 this.translateService.instant('stringToBeTranslated') is equal to stringToBeTranslated// it does not exist

but when you add it to your json

'stringToBeTranslated': "test"

this.translateService.instant('stringToBeTranslated) is equal to test

Angular ngx-translate - check if translation key exists directly in HTML template

1 Answers