CODEWITHSUNDEEP
angular
Ricardo Baptista
Ricardo Baptista

Reputation: 83

Supporting multiple locales with i18nSelect pipe

I want to display a property of my component on my template, but translated according to user's locale.

For instance, suppose my component has property fruit set to one of following values: apple, pinapple or watermelon.

I want to display this property on my template while translating its value to user's language.

I can achieve that using i18nSelect pipe:

Your fruit: {{fruit | i18nSelect:fruitMap}}

And on my component:

fruitMap = { apple: 'maçã', pineapple: 'abacaxi', watermelon: 'melancia' }

That works fine. But I'd like to support multiple locales. It'd be great to have multiple translation files, one for each language, and select from one of them at server startup (something like ng start --locale=pt).

Is that somehow possible using i18nSelect pipe?

I know Angular supports internationalization (https://angular.io/guide/i18n) but I couldn't find anywhere on documentation how to translate the value of a interpolated property. It seems it is all about translating static texts on templates. Except for its select syntax (https://angular.io/guide/i18n#translate-select) which is what I need, but it would require me to replicate the same select conditionals all over my templates.

Upvotes: 1

Views: 382

Answers (1)

smnbbrv
smnbbrv

Reputation: 24571

A third party library https://github.com/ngx-translate/core allows you to actually do way more than standard i18n by angular. You can lazily load translations without even restarting the server; store translations on DB level / app level + use other useful features.

Upvotes: 1

Related Questions