The header text in the center of our page is not updated when a target language is selected. If you refresh the page, you are able to see that the text will update properly to its proper translation.
We use Angular 5, a front-end javascript framework, that dynamically updates the DOM when changes are made.
AngularJS framework is not fully supported by Transifex Live.
The following workaround in Angular 2+ for this unsupported behavior of the framework with Transifex live might help you deal with this. This code is very specific to Angular 2+, so anyone using AngularJS, React or VueJS would not be able to use this exact structure.
Some images that refer to this approach can be found below:
#1:
This is the name of the variable containing a string that needs to be translated. It is also important that you specify the notranslate class on the element, as this will keep Transifex Live from hijacking the text from the framework, and allow this transformation pipe to alter the text without interference.
#2:
In the screenshot above, you can find the code that can help you to ensure that the text is translated even if the element is not re-rendered. It’s not an ideal solution as it requires one to be very conscious of when this Pipe would need to be used, but it works!