Login/Register
AngularJS dynamic lang attribute of html
Asked Answered
htmlangularjslang
H

4

8

I need some help for change dynamically the lang attribute of HTML:

<html lang="en">

I'm making a multilanguage web application with AngularJS and rest backend. Initially I can specify a default lang attribute, but I want to change it depending on the user browser or change it if the user selects inside the web application some language option.

There is some way to do it?

Howardhowarth answered 20/10, 2014 at 8:48 Comment(1)
It would help if you mark one of the answers as correct answer, as the answers below are really helpful. :) – Lafountain
P
6

If you don't want to add controller to your <html> tag and if you are using angular-translate then you can use a simple directive to achieve the same.

Angular-translates gives an event $translateChangeSuccess when your translation loaded successfully or when you change the language (I assume you will use $translate.use to change the current language). We can create a custom directive using that event.

Directive Code Snippet:

function updateLanguage( $rootScope ) {
    return {
      link: function( scope, element ) {
        var listener = function( event, translationResp ) {
          var defaultLang = "en",
              currentlang = translationResp.language;

          element.attr("lang", currentlang || defaultLang );
        };

        $rootScope.$on('$translateChangeSuccess', listener);
      }
   };
}
angular.module('app').directive( 'updateLanguage', updateLanguage );

And you have add the same directive in you html attribute.

<html update-language>
Perplex answered 5/8, 2016 at 6:29 Comment(3)
Thanks this works when changing a language. However it doesn't work initially or when adding a new element (like a modal). So I made a small addition to fix this, check below. – Bayreuth
Can you share your code(github or fiddle etc.) url? How are you initially loading the translations? After initial load complete, it should raise the event $translateChangeSuccess where you will get the current language and it should work fine. In my answer, it was assumed that you will load the translations during the bootstrapping of your app. – Perplex
It's a private project that I can't really share. The initial language is set in the config using $translateProvider.preferredLanguage. The event is not sent, or maybe send too early before for the directive is loaded. My fix also deals with adding new elements afterwards. This doesn't matter when you only use it on the html or body of course. – Bayreuth
T
2

If you want to change the language dynamically. simply you can add one controller to html tag and then change the language.

Try this:

<html ng-app="langChange" ng-controller="langCtrl" lang={{lang}}>

</html>

js code:

var app = angular.module(langChange,[]);
app.controller("langCtrl",[$scope,function($scope){
            $scope.lang = "en";//here you can change the language dynamically
}])
Turbulence answered 20/10, 2014 at 9:2 Comment(0)
M
1

If you are making a single page web application, why would that even matter? But sure, you can change it as any attribute, using e.g. <html lang="{{ lang }}">. If you want to have localized content, then you could use angular-translate .

Mastiff answered 20/10, 2014 at 9:2 Comment(0)
B
0

To improve Debajit's answer, I tweaked his directive to make sure it also works when creating new elements and when preferredLanguage is set:

function updateLanguage( $rootScope, $translate ) {
    return {
      link: function( scope, element ) {
        var defaultLang = "en";
        element.attr("lang", $translate.use() || defaultLang );

        var listener = function( event, translationResp ) {
          var currentlang = translationResp.language;   
          element.attr("lang", currentlang || $translate.use() || defaultLang );
        };

        $rootScope.$on('$translateChangeSuccess', listener);
      }
   };
}
angular.module('app').directive( 'updateLanguage', updateLanguage );

Just add the 'update-language' attribute to any element, e.g. <html update-language>

Bayreuth answered 14/11, 2016 at 8:57 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.