Using AngularJS and Angular Translate, how do you check if a string has been translated?

Question

How to check if a string has a translated value? I am using AngularJS and AngularTranslate.

I want to show the value only if it has been translated. Angular Translation will display an untranslated string if translation is not available.

I started to do this:

<div ng-if="question.text | translate != question.text">{{ question.text | translate }}</div> 

But this will not work, since the comparison occurs before the translation filter has worked. (At least I think this is happening).

What I did in the end:

  .filter('isTranslated', function(){ return function(translatedVal, originalVal){ return (translatedVal === originalVal) ? false : true; } 

})

 <div ng-if="question.text | translate | isTranslated:question.text">{{ question.text | translate }}</div> 

This works fine, but I wonder if there is a better way to do this?

Answer 1

Angular -translate also provides a service , so you can create your own filter around it:

 .filter('myTranslate', function($translate){ return function(key){ var translation = $translate(key); if(translation==key) { return ""; } else { return translation; } } 

This will make your HTML much cleaner:

 <div>{{ question.text | myTranslate }}</div> 

Answer 2

For some time now, you can use the custom error handler https://angular-translate.imtqy.com/docs/#/guide/17_custom-error-handler to return an empty string if a translation is not found.

Answer 3

* ngIf = "! (question.text | translate)"