Internationalization (i18n)
Internationalization means translating your texts into several languages, but also formatting dates, numbers, currencies and much more. Here are a few tips on how to do it with Angular.
General guidelines
Consider translating in the template rather than in the component class.
Do use LOCALE_ID injection token to get the app current locale.
- ✅
locale = inject(LOCALE_ID);
Note that LOCALE_ID is the application language, not the user's preferred language. They can be the same, which is the optimal case, but they can also differ. If a french user visit an english website, the application language will be en-US while the user's preferred language will be fr-FR.
Angular will use LOCALE_ID by default for everything related to internationalization, such as date and number formatting.
Detect user preferred language
Do use navigator.language on client side to get the user prefered language.
Do use Accept-Language HTTP header on server side to get the user preferred language.
Accept-Language header can be used to automatically redirect users to their preferred language, unless a specific language is requested.
Date and time formatting
Consider storing date in UTC timezone and converting it to local timezone when displaying it.
Do use DatePipe to format dates and times.
- ✅
{{ date | date }} - ✅
{{ date | date:'short' }}(with specific format)
Number formatting
Do use DecimalPipe to format numbers.
- ✅
{{ date | number }} - ✅
{{ date | number:'1.0-2' }}(with specific format)
Libraries
Consider using one of the following:
✅ Angular built-in i18n: compile-time internationalization library that is part of Angular.
- ❌ Does not support runtime language switching (needs window refresh)
Angular i18n generates translation files from your source code but does not merge existing translations files with new ones. We recommend using ng-extract-i18n-merge to handle that.
- ✅ Supports runtime language switching
- ✅ Supports runtime language switching