@xss-shared-library/translations

@xss-shared-library/translations

This library provides translation support for Angular applications using @ngx-translate. It simplifies the process of managing multilingual support by offering tools to load, fetch, and use translation files dynamically.

Features

• Dynamic Translation Loading: Fetch translation files from the server dynamically.
• Language Switching: Easily switch between multiple languages at runtime.
• Integration with ngx-translate: Built on top of the popular @ngx-translate library.
• Customizable: Extendable to support project-specific translation requirements.
• Error Handling: Gracefully handles missing or invalid translation files.

Installation

To install the library, run the following command:

npm install @xss-shared-library/translations

Usage

Import the Module

Add the XSSTranslationModule to your Angular application's module:

import { XSSTranslationModule } from '@xss-shared-library/translations';

@NgModule({
  imports: [
    XSSTranslationModule
  ]
})
export class AppModule { }

Fetch Translations in Components

Use the XSSTranslationService to fetch translations dynamically in your components:

import { Component } from '@angular/core';
import { XSSTranslationService } from '@xss-shared-library/translations';

@Component({
  selector: 'app-root',
  template: `<h1>{{ translatedText }}</h1>`
})
export class AppComponent {
  translatedText: string = '';

  constructor(private translationService: XSSTranslationService) {
    this.translatedText = this.translationService.getTranslatedValue('app.title');
  }
}

Handle Language Changes

The XSSTranslationService provides a method to dynamically change the language at runtime:

import { Component } from '@angular/core';
import { XSSTranslationService } from '@xss-shared-library/translations';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="changeLanguage('en')">English</button>
    <button (click)="changeLanguage('fr')">French</button>
  `
})
export class AppComponent {
  constructor(private translationService: XSSTranslationService) {}

  async changeLanguage(language: string): Promise<void> {
    try {
      await this.translationService.changeLanguage(language);
      console.log(`Language changed to ${language}`);
    } catch (error) {
      console.error('Failed to change language:', error.message);
    }
  }
}

Translation Files

Place your translation files in the assets/i18n/ directory. For example:

assets/i18n/en.json:

{
  "app": {
    "title": "Welcome to the Application"
  }
}

assets/i18n/fr.json:

{
  "app": {
    "title": "Bienvenue dans l'application"
  }
}

Error Handling for Missing Translation Files

The changeLanguage method in the XSSTranslationService will throw an error if the specified language file is not found. Ensure that all required translation files are available in the assets/i18n/ directory.

Example:

try {
  await this.translationService.changeLanguage('es'); // Switch to Spanish
} catch (error) {
  console.error('Error:', error.message); // Handle missing translation file
}

Contributing

Contributions are welcome! If you find a bug or have a feature request, please open an issue or submit a pull request.

License

This library is licensed under the MIT License. See the LICENSE file for more details.

Further Help

For more help with the Angular CLI, use ng help or check out the Angular CLI Overview and Command Reference page.