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