Angular - ngx-translate - Checking if translate key exist with Angular

7
votes

I use ngx-translate in my Angular application.

My HTML template:

<span [ngClass]="(role === 'ADMIN') ? 'badge badge-danger' : 'badge badge-success'">{{ 'ADMIN.USER.ROLES.' + role | translate }}</span>

My i18n json file:

"ADMIN": {
  "USER": {
    "ROLES": {
      "ADMIN": "Administrator",
      "FOO": "Auditor FOO",
      "DOO": "Auditor DOO",
      "ROO": "Auditor ROO",
      "unknown": "Unknown"
    }
  }
}

If my role is BIPBIP, I want use 'ADMIN.USER.ROLES.unknown' key.

I looking for a HTML template solution (NOT Javascript):

this._translateService.get("app.key").subscribe(res=>{
    if(...) {
        // message does not exist
    }
    else {
        // message exists
    }
}))
3
angularngx-translate

3 Answers

7
votes

Since I found no way to safely check for the presence of a translation, the best thing I could do is to check for equality synchronously:

hasTranslation(key: string): boolean {
  const translation = this.translateService.instant(key);
  return translation !== key && translation !== '';
}

However, I filed an issue with ngx-translate, asking for an official check method.

So, for your template you could just test with hasTranslation(x) ? ... : ...

0
votes

I really think this should be done with a function in JavaScript. Assuming you have an object with this mapping called ADMIN, you can do it like this.

<span [ngClass]="(role === 'ADMIN') ? 'badge badge-danger' : 'badge badge-success'">{{ this.ADMIN.USER.ROLES[role] ? 'ADMIN.USER.ROLES.' + role : 'ADMIN.USER.ROLES.unknown' | translate }}</span>
0
votes

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

Thanks to https://www.nuomiphp.com/eplan/en/390812.html