Translate a angularJS Value with Symfony

Question

I'm using Symfony in my backend and render the templates via twig. For translations I'm using following guide, which works fine. https://symfony.com/doc/current/translation.html

works:

{{ "Active Option" | trans({}, 'frontend', app.request.locale) }}

But the problem is, that I have some of the words, which I have to translate, are in angularJS variables. I have multiple .xlf files for the translation and I know the angular.translate. But I don't want to implement it.

{{ '{{' }} item.optionTitle {{ '}}' | trans({}, 'option', app.request.locale) }}

Can anybody explain me how I could translate the value of an angularJS variable with the twig translate?

Answer 1

https://github.com/willdurand/BazingaJsTranslationBundle

Translation of twig is rendered server side, your js is client side. With this bundle you can expose the translations to js. But I have no experience with that bundle and angular.

Answer 2

Use verbatim tag. It marks sections as being raw text that should not be parsed.

For exmple:

Create twig variable and affect it at value of angular's variable

{% set optionTitle %}
    {% verbatim %} {{ item.optionTitle }}{% endverbatim %} 
{% endset %}

Traslatate

{{ optionTitle | trans({}, 'option', app.request.locale) }}

Now {{ item.optionTitle }} will not parsed by twig but by angularjs.

Answer 3

You can create an API endpoint which accepts string to translate

/api/translate?string=Active+Option

And translate in API controller

$translator->trans($string);

Then build a simple translation filter in AngularJS

angular.filter('apiTranslate', function($http) {
  return function(string) {
    $http.get('/api/translate?string=' + string).then(function (response) {
      return response;
    });
  };
})

Keep in mind that there are other solutions which work great with this problem (as suggested BazingaJsTranslationBundle), but you mentioned that you don't want to use libraries, and want to use TWIG to translate.

Answer 4

There are not so much alternatives. You need to create something like this in your html

<script>
   var Global = Global || {};
   Global.translation = {{ catalogue|raw|json_encode }}
</script>

In this way you expose globally the translation to your other files.

What is catalogue?

From version 2.6 symfony gives you a way to get the whole translation catalogue exactly in case you need to expose it to your frontend

In case you want to use the same translation catalogue outside your application (e.g. use translation on the client side), it's possible to fetch raw translation messages. Just specify the required locale

Documentation

$catalogue = $translator->getCatalogue('fr_FR');
$messages = $catalogue->all();
while ($catalogue = $catalogue->getFallbackCatalogue()) {
   $messages = array_replace_recursive($catalogue->all(), $messages);
}
// $messages contains the whole catalogue that you have to pass to frontend

So basically your catalogue will be shared with the frontend.

Back to frontend

Then I created a function that simply returns me the translation by key.

function _translate(key) {
    return Global["translation"][key];
}