@cms-libs/translation

A lightweight Angular translation utility built on top of @ngx-translate/core.
It provides a configurable TranslationService with built-in support for:

• ✅ Multiple languages
• ✅ RTL/LTR direction handling (using Angular CDK Direction)
• ✅ Language persistence in localStorage
• ✅ Signals for reactive language and direction changes

📦 Installation

npm install @cms-libs/translation @ngx-translate/core @angular/cdk

⚙️ Setup

1. Provide Translation Config

Define available languages in your application:

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';
import { provideTranslate } from '@ngx-translate/core';
import { TRANSLATE_CONFIGURATION, TranslationConfig } from '@cms-libs/translation';

const translationConfig: TranslationConfig = {
  availableLanguages: [
    { value: 'en', label: 'English', direction: 'ltr' },
    { value: 'ar', label: 'العربية', direction: 'rtl' },
  ],
};

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(),
    provideTranslate(),
    { provide: TRANSLATE_CONFIGURATION, useValue: translationConfig },
  ],
};

2. Initialize Translation Service

// app.component.ts
import { Component, OnInit, inject } from '@angular/core';
import { TranslationService } from '@cms-libs/translation';
import { TranslatePipe } from "@ngx-translate/core";

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TranslatePipe],
  template: `
    <button (click)="switchLang('en')">English</button>
    <button (click)="switchLang('ar')">عربي</button>

    <h1>{{ 'HELLO' | translate }}</h1>
  `,
})
export class AppComponent implements OnInit {
  private translation = inject(TranslationService);

  ngOnInit(): void {
    this.translation.initialize();
  }

  switchLang(lang: string): void {
    this.translation.switchLanguage(lang);
  }
}

🚀 Features

Reactive Signals

const translation = inject(TranslationService);

translation.language(); // current Language object
translation.langDir();  // "ltr" | "rtl"

Local Storage Persistence

The selected language is saved under the key LANGUAGE in localStorage. You can override storage methods for SSR:

protected saveInLocalStorage(key: string, value: string): void {
  // custom implementation for SSR
}

📑 Interfaces

Language

export interface Language {
  value: string;   // e.g., 'en', 'ar'
  label: string;   // display name
  direction?: Direction; // 'ltr' | 'rtl'
}

TranslationConfig

export interface TranslationConfig {
  availableLanguages: Language[];
}

📌 Example Translations

In assets/i18n/en.json:

{
  "HELLO": "Hello World"
}

In assets/i18n/ar.json:

{
  "HELLO": "مرحبا بالعالم"
}