@martiald/translator

Angular service that wraps @jsverse/transloco to manage the application's active language and persist it in localStorage, so the user's language choice survives page reloads.

Installation

npm install @martiald/translator @jsverse/transloco

@jsverse/transloco is a required peer dependency — this library only manages the active language on top of it, it does not replace your Transloco setup (translation files, loader, provideTransloco(), etc.).

Peer dependencies

| Package | Version | | --- | --- | | @angular/common | ^21.2.0 | | @angular/core | ^21.2.0 | | @jsverse/transloco | ^8.4.0 |

Usage

Once Transloco is configured in your app, inject TranslatorService to read and update the active language.

import { Component, inject, OnInit } from '@angular/core';
import { TranslatorService } from '@martiald/translator';

@Component({ /* ... */ })
export class AppComponent implements OnInit {
  private readonly translator = inject(TranslatorService);

  ngOnInit(): void {
    // Restores the language saved in localStorage, or falls back
    // to Transloco's currently active language if none was saved yet.
    this.translator.initLanguage();
  }

  switchLanguage(lang: string): void {
    this.translator.setLanguage(lang);
  }
}

API reference

TranslatorService

| Method | Description | | --- | --- | | initLanguage(): void | Reads the language stored in localStorage and activates it via Transloco. If nothing is stored yet, keeps Transloco's current active language. Call this once when your app starts. | | setLanguage(lang: string): void | Sets lang as Transloco's active language and persists it to localStorage. | | getLanguage(): string | Returns the language currently active in Transloco. |

Building

ng build translator

Build artifacts are written to dist/translator.

Publishing

cd dist/translator
npm publish --access public

Running unit tests

ng test