$translate.instant does not translate values in AngularJS component when component starts

Question

With Angular Translate and $translate.instant() method I built AngularJS's select component with automatic switching between languages:

<translated-select
  elements="$ctrl.values"
  current-value="$ctrl.value"
  on-change="$ctrl.setValue(value)"
></translated-select>
{{ $ctrl.value }}
<hr>
<button ng-click="$ctrl.switchToPolish()">
  Switch to polish
</button>
<button ng-click="$ctrl.switchToEnglish()">
  Switch to english
</button>

As you can see on Plunker: Angular JS select with automated translations. Problem is that it shows selects options as undefined until I choose second option. Then everything works, and I can switch between english and polish translations of options. I tried even wait for first change with $onChanges hook and if change occurred run $digest with $timeout:

this.$onChanges = function (changes) {
  if (changes.elements) {
    $timeout(function () {
      this.values = changes.elements.currentValue;
    }.bind(this));
  }
  if (changes.currentValue) {
    $timeout(function () {
      this.value = changes.currentValue.currentValue;
    }.bind(this));
  }
}

But again and again, I have to choose second option in select to make it work. Am I missing something? I would be grateful if anybody will help me, thank you in advance.

I'd suggest having a look at https://www.sitepoint.com/multilingual-support-for-angularjs/ and https://scotch.io/tutorials/internationalization-of-angularjs-applications. Both contain good solutions for your issue — Chris Satchell, Sep 18 '16 at 13:12
@ChrisSatchell Could you please specify a little bit? Do you mean listening to `$translateChangeSuccess`? I don't think it can change something - once I choose second option everything works well, but if I don't - even if I use 5 second `$timeout` it won't work. — Radek Anuszewski, Sep 18 '16 at 16:12
I meant the part about switching languages without having to reload anything — Chris Satchell, Sep 18 '16 at 16:54

d.h. · Accepted Answer · 2016-09-21T17:20:18.867

$translate.instant() isn't aware of the fact that the translation might not be loaded completely.

As per documentation:

Returns a translation instantly from the internal state of loaded translation.

So if you don't rely on $translate.instant() you could also use the translate filter (which uses a watch internally) as follows:

<select ng-model="$ctrl.value"' + 'ng-options="value as (value | translate) for value in $ctrl.values" ' + ' ng-change="$ctrl.onSelect()" ' + '></select>

A complete example can be found here:

http://plnkr.co/edit/zmYgiOOVjXCmGprsvOLO?p=preview

score 2 · Answer 2 · answered Sep 24 '16 at 11:21

Consider having a try of $onInit instead of $onChanges. As from the documentation:

$onInit() - Called on each controller after all the controllers on an element have been constructed and had their bindings initialized (and before the pre & post linking functions for the directives on this element). This is a good place to put initialization code for your controller.

this.$onInit = function() {
  this.values = this.elements;
  this.value = this.currentValue;

  this.onSelect = function() {
    this.onChange({
      value: this.value
    });
  };

  this.translate = function(key) {
    return $translate.instant(key);
  };
};

See: http://plnkr.co/edit/5T90efhcnaQoEGoLY1gZ?p=preview

$translate.instant does not translate values in AngularJS component when component starts

2 Answers2