Angular support for multiple language

Posted By : Abhishek Saini | 09-Jan-2017

Angular

Angular Multiple Language Support

This is how you can integrate multiple languages options for your website using angular.

Install the package

bower install angular-translate

Include the script into your index.html .

After including it.Make your app require the library as a dependency.

var app = angular.module('theApp', ['pascalprecht.translate']);

Now in your config part do something like:

app.config(function($translateProvider) {
  $translateProvider.translations('en', {
    TITLE: 'Welcome!',
    MESSAGE: 'This app supports your lanaguage!'
  })
  .translations('sv', {
    TITLE: 'Välkommen!',
    MESSAGE: 'Denna app stöder ditt språk!'
  });

  $translateProvider.preferredLanguage('en');
});

You can also provide multiple languages according to your need.

Now in your html use like :

{{ 'TITLE' | translate }} {{ 'MESSAGE' | translate }}

Now in your controller be like:

app.controller('HomeCtrl', function($translate) {
var ctrl = this; 
ctrl.language = 'en' 
ctrl.languages = ['en', 'sv']; 
ctrl.updateLanguage = function() {
$translate.use(ctrl.language); 
}; 
});

Just call above function where you need .You can also give options to user to select language from drop down and on its ng-change method just call your controller method.

Hope this will help.

Thanks.