A signal-driven translation service.
- Lazy load language JSON files via HTTP request.
- Pipe for translating the template strings. (signal)
- Service with a synchronous, signal and observable translate interface. (The synchronous interface works with computed signal and signal effects.)
- Option for the variable replace in the translated strings.
npm install ngx-signal-translate # Or if you use yarn yarn add ngx-signal-translateAdd configuration provider to your app.config.ts as provider.
import { provideSignalTranslateConfig } from 'ngx-signal-translate'; export const appConfig: ApplicationConfig = { providers: [ provideSignalTranslateConfig({path: ''}), ], };The path is a required config parameter, that will be the json language files base folder.
And finally set the default language in your AppComponent constructor:
import { NgxSignalTranslateService } from 'ngx-signal-translate'; @Component({}) export class AppComponent { readonly #signalTranslateService = inject(NgxSignalTranslateService); constructor(){ this.#signalTranslateService.setLanguage('en'); } }The language files should be JSON files, and the language key should be the file name.
Example:
{ "DEMO": "Demo" }The language files be able to handle variables in the translation string. When the translation service gets variables for a replacement, it will try to replace these keys in the template string. You need to put the variable key inside brackets.
Example:
{ "DEMO": "Demo {param}" }import { NgxSignalTranslatePipe } from 'ngx-signal-translate'; @Component({ imports: [NgxSignalTranslatePipe] }) export class DemoComponent {}without params:
<p>{{('Demo' | signalTranslate)()}}</p>with params:
<p>{{('Demo' | signalTranslate : {param: 'hello'})()}}</p>import { NgxSignalTranslateService } from 'ngx-signal-translate'; @Component({}) export class DemoComponent implements ngOnInit{ readonly #signalTranslateService = inject(NgxSignalTranslateService); readonly #translatedText = computed(() => this.#signalTranslateService.translate('DEMO')); constructor() { effect(() => { console.log(this.#signalTranslateService.translate('DEMO')); }); /* The translate function triggers the signal effects. */ } public ngOnInit(): void { console.log(this.#signalTranslateService.translate('DEMO')); /* If the selected language files were not loaded, then the function will return with the translation key. */ this.#signalTranslateService.translate$('DEMO').subscribe(console.log); /* The translate$ observable will wait for the language file to load. */ console.log(this.#translatedText()); /* The translate function works with computed signals. That will trigger the value refresh when the language resource / selected language changed. */ } }The second parameter can be used to pass translate variables to the translate and translate$ function.
| ngx-signal-translate | Angular |
|---|---|
| - | Newer versions follow Angular’s versioning format. |
| 3.x | >= 20.x.x |
| 2.x | 19.x.x |
| 1.x | 18.x.x |