I am creating a multi-language application and am struggling to figure out how to do it. I have a dropdown for the language selection (EN & FR) in a re-useable title bar. Here is what I need help with:
- How do I get the ‘Language’ dropdown selection located in the re-useable title bar to interact with Elements on the main page?
- I want to dynamically display text based on the language selected in the re-useable title bar’s Language dropdown. I figure there are two options to doing this:
Option 1: I have thought about putting all the translations each in a container and then only display the appropriate container for the language selected. Because I haven’t figured out how to interact with the Language dropdown in the re-useable title bar, I have not been able to do this.
Option 2: Use a table/database with the translation in it. The table would have the following fields: ‘Default’, ‘En’, ‘Fr’. Let’s say I have a form to add the names of Provinces/States and I want the text ‘ADD PROVINCE/STATE’ to be displayed if the Language dropdown = En, and ‘AJOUTER UNE PROVINCE/UN ÉTAT’ if the Language dropdown = Fr, and the Default value would be ‘Add Province’. How do I use the dynamic text to display the text for the selected language. I figure it should be something along the lines of… If Language dropdown = ‘En’ display the ‘En’ value where the Default value = ‘Add Province’. I thought this would be easy, but I have not been able to figure out how to do this and am asking for your help.
Also, from a performance perspective which would be better Option #1 or #2? I am thinking that Option #1 would be better because Option #2 would have to go to the translation table to fetch the appropriate translation for each item. And Option #1 would simply be displaying the appropriate translation based on the selected language, but it would be loading all the possible translations. Which way would you recommend?