Translation SDK

This translation SDK allows you to easily integrate translation features into an Angular application.

Installation

To install the translation SDK, use npm:

npm install translation-sdk

Configuration

Configure the SDK in your app.config.ts file:

import { provideTranslationSdk } from 'translation-sdk';

export const appConfig: ApplicationConfig = {
  providers: [
    provideTranslationSdk({
      serverUrl: 'http://localhost:3000',
      envKey: '9277350e-a3f8-47fb-bb35-f5446bf871b2',
      defaultLocale: 'fr-FR',
      pushContent: true,
      pushContentInterval: 30000,
    }),
  ],
};

Module Configuration

To configure the TranslationSdkModule, use the forRoot method in your main module (e.g., AppModule). This allows you to provide the necessary configuration for the translation SDK.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TranslationSdkModule } from 'translation-sdk';

@NgModule({
  declarations: [
    // vos composants ici
  ],
  imports: [
    BrowserModule,
    TranslationSdkModule.forRoot({
      serverUrl: 'http://localhost:3000',
      envKey: '9277350e-a3f8-47fb-bb35-f5446bf871b2',
      defaultLocale: 'fr-FR',
      pushContent: true,
      pushContentInterval: 30000,
    }),
  ],
  providers: [],
  bootstrap: [
    /* votre composant principal ici */
  ],
})
export class AppModule {}

This configuration initializes the module with the necessary parameters for the translation SDK. Make sure to replace the default values with those suitable for your application. This includes the server URL, environment key, and content push settings if needed.

Usage

Change the Locale

Use the buttons to change the application's language:

<button (click)="changeLocale('en-US')">🇺🇸 Anglais</button>
<button (click)="changeLocale('fr-FR')">🇫🇷 Français</button>

Translate Text

Use the translate pipe in your HTML templates:

For standolone components

import { TranslatePipe } from 'translation-sdk';

@Component({
  ...
  standalone: true,
  imports: [CommonModule, TranslatePipe],
  ...
})

<p>{{ 'Welcome to our site' | translate }}</p>

Using the Translation Service

In your Angular component, inject the TranslationService to manage translations:

import { TranslationService } from 'translation-sdk';

export class App {
  constructor(private translationService: TranslationService) {
    // Use the translation service to translate 'Hello World' asynchronously
    this.translationService.translate('Hello World').subscribe((translation) => {
      console.log(translation);
    });

    // Watch for changes in the locale and translate 'Hello World' synchronously
    this.translationService.watchLocaleChanges().subscribe(() => {
      console.log(this.translationService.translateSync('Hello World'));
    });
  }

  // Method to change the application's locale
  changeLocale(locale: string) {
    this.translationService.changeLocale(locale);
  }
}

Features

• Asynchronous Translations: Retrieve translations asynchronously using Observables.
• Synchronous Translations: Retrieve translations synchronously using Observables.
• Locale Management: Dynamically change the application's language.
• Locale Change Observation: Listen for changes in the locale.
• Persistent Storage: Translations are stored in IndexedDB for offline use.

For more information, refer to the complete SDK documentation.