Search code examples
angularjsinternationalizationlocaleangular-translate

AngularJS: Dynamic locale


I'm using Angular Dynamic locale and Angular-Translate for internationalization and localization (i18n). And works well.

I like the idea of angular-translate that is possible to change the language without refresh the page.

  • Is possible to do the same with Angular Dynamic locale? If is possible, how can I get this?

All the words from angular-translate changed automatically, but not the words from angular_locale (datapicker, etc), that the users need refreshing the page.

Thanks!


Solution

  • Just in case you don't have absolute necessity to use Angular Dynamic locale,you can create your own LocaleFactory like this:

     factory('LocaleFactory', function ( $locale, $translate) {
        var locales = {
            nl: {
                "DATETIME_FORMATS": {
                    "AMPMS"     : [
                        "AM",
                        "PM"
                    ],
                    "DAY"       : [
                        "zondag",
                        "maandag",
                        "dinsdag",
                        "woensdag",
                        "donderdag",
                        "vrijdag",
                        "zaterdag"
                    ],
                    "MONTH"     : [
                        "januari",
                        "februari",
                        "maart",
                        "april",
                        "mei",
                        "juni",
                        "juli",
                        "augustus",
                        "september",
                        "oktober",
                        "november",
                        "december"
                    ],
                    "SHORTDAY"  : [
                        "zo",
                        "ma",
                        "di",
                        "wo",
                        "do",
                        "vr",
                        "za"
                    ],
                    "SHORTMONTH": [
                        "jan.",
                        "feb.",
                        "mrt.",
                        "apr.",
                        "mei",
                        "jun.",
                        "jul.",
                        "aug.",
                        "sep.",
                        "okt.",
                        "nov.",
                        "dec."
                    ],
    
                    "fullDate"  : "EEEE d MMMM y",
                    "longDate"  : "d MMMM y",
                    "medium"    : "d MMM y HH:mm:ss",
                    "mediumDate": "d MMM y",
                    "mediumTime": "HH:mm:ss",
                    "short"     : "dd-MM-yyyy HH:mm",
                    "shortDate" : "dd-MM-yyyy",
                    "shortTime" : "HH:mm"
                },
                "NUMBER_FORMATS"  : {
                    "CURRENCY_SYM": "\u20ac",
                    "DECIMAL_SEP" : ",",
                    "GROUP_SEP"   : ".",
                    "PATTERNS"    : [
                        {
                            "gSize"  : 3,
                            "lgSize" : 3,
                            "macFrac": 0,
                            "maxFrac": 3,
                            "minFrac": 0,
                            "minInt" : 1,
                            "negPre" : "-",
                            "negSuf" : "",
                            "posPre" : "",
                            "posSuf" : ""
                        },
                        {
                            "gSize"  : 3,
                            "lgSize" : 3,
                            "macFrac": 0,
                            "maxFrac": 2,
                            "minFrac": 2,
                            "minInt" : 1,
                            "negPre" : "\u00a4\u00a0",
                            "negSuf" : "-",
                            "posPre" : "\u00a4\u00a0",
                            "posSuf" : ""
                        }
                    ]
                }
            }
        };
    
        return {
            setLocale: function (key) {
                $translate.use(key);
                angular.copy(locales[key], $locale);
            }
        };
    });
    

    Similarly you can add other locals as well

    Call setLocale to change the locale

    run(function (LocaleFactory) {
        LocaleFactory.setLocale('nl');
    });
    

    When ever your locale get changed you can call setLocale by providing the locale key as an argument. It will change your locale instantly