Angular Translate and Using forceLanguage

gistfile1.md

I had a scenerio in my Ionic/Angular application where I wanted to translate only a certain block of text seperate from the rest of the text in my Application. Meaning I didn't want the whole app to translate itself when I translate said block of text. So how can this be done? A quick look into the documentation for $translate you'll notice a 4th optional parameter: forceLanguage.

https://angular-translate.github.io/docs/#/api/pascalprecht.translate.$translate

So instead of using $translate.use(key) (which would set the locale for my whole application) I used forceLanguage in a simple function. First I created my language dropdown:

<select id="shareSelect" ng-model="optionSelected" ng-change="onSelectLangChange(optionSelected)">
    <option value="default" ng-selected="selected">Select a Language</option>

    <option ng-repeat="(key, value) in availableTranslations" value="{{key}}">
        {{value}}
    </option>
</select>

Then in my onSelectLangChange() in my Controller:

        $scope.onSelectLangChange = function(optionSelected) {
            console.log("Option selected: " + optionSelected);
            
            $translate('item_key', null, null, optionSelected).then(function(translation) {
                console.log("Translated Text: " + JSON.stringify(translation));
                $scope.translatedText = translation;
            });
        }

Now to go a step further you can translate multiple keys at once by passing in an array of keys which will return a promise of the object containing the translated values.

        $scope.onSelectLangChange = function(optionSelected) {
           ...
            $translate(['item_key_1', 'item_key_2'], null, null, optionSelected).then(function(translation) {
                ...
            });
        }

However, there appeard to be a bug with this in the current angular-translate where the promise wasn't returning the values translated from my optionSelected when I passed it as the forceLanguage. I was able to make it work using $translate.instant() instead:

$scope.onSelectLangChange = function(optionSelected) {
    console.log("Option selected: " + optionSelected);

    var tranlatedItems = $translate.instant(['item_key_1', 'item_key_2'], null, null, optionSelected);
    console.log("Translated Items: " + JSON.stringify(tranlatedItems));
}

And it works!

It's also important to note I had to use version 2.11 of angular translate which contained bug fixes for forceLanguage.

gistlog.yml

published: true