CODEWITHSUNDEEP
angularlocalizationinternationalizationlocaletranslation
ValiM
ValiM

Reputation: 45

Angular localization for multiple clients and fallbacks

I have an Angular 10 app that will be served to multiple clients. Each client can have (it's not a must) it's own set of translated text. How can I implement this kind of multiple fallback? The complete fallback scenario should look like this:

[client.fr-CA]-> [client.fr] -> [client.en] -> (global-fr-CA) -> (global-fr) -> global-en

So, if the text is not found in client.fr-CA then it will be searched into client.fr, and so on until it reach global-en that contains all the text in the app.

I also tried to use Angular it's own i18n implementation and I also tried with ngx-translate. Both of them have only one fallback. I don't even find a way to implement different locale flavors like this: (fr-CA) -> (fr) -> en.

Should I implement my own translation mechanism? :)

Thanks in advance!

Upvotes: 1

Views: 344

Answers (1)

Fateh Mohamed
Fateh Mohamed

Reputation: 21367

There is not a good way of doing it but i will propose something to you where you can get the value of your translation using the async pipe

imagine that you have this

<p>{{ 'name' | translate }}</p>

you have to change it to

<p>{{name$ | async }}</>

and get translation value in you controller based on your conditions, let say the order is fr -> en -> de

name$: Observable<string> = this.translate.getTranslation(fr).pipe(
   switchMap(frTranslations=>
     iif(() => !!frTranslations['name'] // check here if exist
           , of(frTranslations['name'])
           , this.translate.getTranslation(en).pipe(
               switchMap(enTranslations=>
                iif(() => !!enTranslations['name'] // check here if exist
                 , of(enTranslations['name'])
                 , this.translate.getTranslation(de) ...
          )
         )
       )
     )      
   )
 );

it needs more refactoring but i wish you get the idea, the idea is to check the translation if it does exist if yes you get the value , if no you move to the next call

Upvotes: 1

Related Questions