CODEWITHSUNDEEP
javascriptangularjsangular-translate
Niranjan Godbole
Niranjan Godbole

Reputation: 2175

Dynamic language selection in AngularJS

Hi I am developing one application in Angularjs. This website will be in two languages. They are arabic and english. Belo is the logic i am using for selection of language. If the browser default language is Arabic then display website in Arabic. If the browser default language is not Arabic then display website in English.

Also i have kept image(Arabic and English) on website to switch between languages.

  <div class="language"><a href="#"><img src="images/arabic.png"></a></div>
        <div class="language"><a href="#"><img src="images/en-english-language-browser-function-512.png"></a></div>

now two anchor tags are there. I am trying to bind image to anchor tag based on the language selection. I do not want 2 anchor tags.

app.controller('RoslpAppController', ['$scope', '$translate', 'toastr', '$window', function ($scope, $translate, toastr, $window) {
    debugger;
    var lang = $window.navigator.language || $window.navigator.userLanguage;
    if (lang === 'ar-sa')
    {
        $translate.use('de_AR');
         //bind arabic.png
    }
    else
    {
        $translate.use('de_EN');
         //bind english.png
    }
}]);

I am new to the angular world. May I get some help to complete this? Any help would be appreciated. Thank you.

Upvotes: 0

Views: 2269

Answers (3)

Antony Joslin
Antony Joslin

Reputation: 319

Use two json files for your website one for English and another one for Arabic. In each files you should give same key and different values like:

For English [ "title":"Website", "img": "your img src path for English" ]

For Arabic [ "title":"Website(Arabic Translation)", "img": "your img src path for Arabic" ]

specify these two files in $translateProvider.useStaticFilesLoader use angular-translate-loader-static-files you can find it on bower or npm.

Then you just mention your img like this:

<img src={{img}}/>

Thats it...

Upvotes: 0

Karl Reid
Karl Reid

Reputation: 2217

You could just store the current language in a $scope variable and use that with ng-src to set the source of the image dynamically. Like this:

<div class="language">
    <a href="#">
        <img ng-src="images/{{ lang === 'ar-sa' ? 'arabic.png' : 'en-english-language-browser-function-512.png' }}"/>
    </a>
</div>

app.controller('RoslpAppController', ['$scope', '$translate', 'toastr', '$window', function ($scope, $translate, toastr, $window) {
    debugger;
    $scope.lang = $window.navigator.language || $window.navigator.userLanguage;
    if ($scope.lang === 'ar-sa')
    {
        $translate.use('de_AR');
         //bind arabic.png
    }
    else
    {
        $translate.use('de_EN');
         //bind english.png
    }
}]);

Upvotes: 0

Drag13
Drag13

Reputation: 5988

This is not controller's problem and you should not use controller fot language selection.

You should use config phase for this, smth like this. 

app.config(function($translateProvider) {
  $translateProvider.translations('en', {
    HEADLINE: 'Hello there, This is my awesome app!',
    INTRO_TEXT: 'And it has i18n support!',
    BUTTON_TEXT_EN: 'english',
    BUTTON_TEXT_DE: 'german'
  })
  .translations('de', {
    HEADLINE: 'Hey, das ist meine großartige App!',
    INTRO_TEXT: 'Und sie untersützt mehrere Sprachen!'
    BUTTON_TEXT_EN: 'englisch',
    BUTTON_TEXT_DE: 'deutsch'
  });
  $translateProvider.preferredLanguage('en');
});

Upvotes: 1

Related Questions