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

2
votes

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?

1
angularjslocalizationangular-translate

1 Answers

3
votes

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