Where to translate with ngx-translate and ngrx in Angular 5?

Question

We have an application, that uses Redux-Pattern with ngrx as well as ngx-translate for i18n. I already learned from this answer how to handle the Angular i18n approach together with ngrx, but I don't know where the ngx-translate-approach fits best into an ngrx application.

Translation can be done

• by service: this.translateService.get('SOME_KEY')
• or by pipe: {{ 'SOME_KEY' | translate }}

which offers four possible places, where keys can be translated:

1. in the component, before calling an action
2. in the action itself, before passing the data to the store
3. in the reducer
4. in the view, when a rerendering is triggered by a state change

Where would you consider it the cleanest way to put the translation process?

Answer 1

Ideally you'd put your translations in the template first, as this is closest to where the translation will appear.

If and when you find that you can't use the template to show some translation, you could then consider using the translateService in your components, services, etc.

BTW you can also use the ngx-translate directive for showing translations:

<div [translate]="'SOME_OTHER_KEY'"></div>