Search code examples
angularjslocalizationangular-translate

Angular-translate: translate different portions of the page with different languages


I'm writing a web application using AngularJS 1.4.x and I'm using "angular-translate" as localization library.

The app supports 2 languages: English and French.

The user can switch between these two languages and the application is localized accrodingly.

Now I have the following request: I need to localize all the application with a "main language", let's say English but I need to localize a small portion of the app in the other language (French).

The two languages must co-exists, so for example the header of the application is in English but the content of the page is in French, please see the attached image:

enter image description here

How can I do that? Is it possible with this library?


Solution

  • One way to do this is to make your own translate filter which will wrap the angular translate.

    app.filter('mytranslation', ['$translate', '$filter', function($translate, $filter) {
     return function(input, lang) {
      input = input || '';
      var currentLanguage = $translate.use();
      $translate.use(lang);
      var result = $filter("translate")(input);
      $translate.use(currentLanguage);
      return result;
    

    } }])

    And then in the html page you can use it as:

     <p>German section</p>
    

    {{'HELLO' | mytranslation:'de'}}

    Here is a working example: https://plnkr.co/edit/pYFo3Wapz12Q6686zrqn?p=preview