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

Setup and usage

$3

Add this line to the beginning of your main.ts:

`ts
import '@angular/localize/init';
`

$3

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"
}
`

$3

`ts
imports: [
...
RuntimeLocalizerModule.forRoot([
{
lang: 'en-US',
path: '/assets/messages/messages.en-US.json',
},
{
lang: 'hu-HU',
path: '/assets/messages/messages.hu-HU.json',
},
]),
]
`

$3

`html



`

... or in the code:

`ts
public buttonText: string = $localize:@@button-text:Fallback button text;
`

$3

`html
Set language to: hu-HU
`

`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`).

Further reading

Check official angular localization guide for more info.