Runtime Localizer for Angular
npm install @deejayy/runtime-localizer
Runtime localization was never been easier!
```
npm i @angular/localize @deejayy/runtime-localizer
- single build
- keep translations in a plain simple JSON file
- have effective fallback values
- use anywhere (code, template)
- unlimited languages (even loadable from backend!)
- setting kept persistent in the localStorage (overrides LOCALE_ID upon initialization)
- loads before app starts
Add this line to the beginning of your main.ts:
`ts`
import '@angular/localize/init';
Put the messages file in your /assets/ folder somewhere. E.g. /assets/messages/messages.en-US.json with the content:
`json`
{
"your-scope/example-token": "Corresponding text"
}
`ts`
imports: [
...
RuntimeLocalizerModule.forRoot([
{
lang: 'en-US',
path: '/assets/messages/messages.en-US.json',
},
{
lang: 'hu-HU',
path: '/assets/messages/messages.hu-HU.json',
},
]),
]
`html`This is the fallback content if language file not found or token is missing.
... or in the code:
`ts:@@button-text:Fallback button text
public buttonText: string = $localize;`
`html`
`ts
constructor(private runtimeLocalizerService: RuntimeLocalizerService) {}
public setLang(lang: string) {
this.runtimeLocalizerService.saveLocale(lang, true);
}
`
The setting will be saved to the localStorage under the key @deejayy/runtime-localizer/localeId (you can refer it as runtimeLocalizerStorageId from the package).
The second parameter is whether the page should be reloaded by the localizer module (true) or you want to take care of yourself in your application (by default false`).
Check official angular localization guide for more info.