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

Question

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

Answer 1

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) ? ... : ...