AEM Translate Module for Angular

Overview

The AEM Translate Module is an Angular module designed to simplify the integration of translations into Angular applications. It provides a service for loading and managing translations, a pipe for easy translation in templates, and a module for configuration and setup.

Features

• Easy integration with Angular applications
• Lazy loading of translation files
• Caching of loaded translations for improved performance
• Support for HTML content in translations
• Configurable root path for translation files

Installation

To install the AEM Translate Module, run the following command in your Angular project:

npm install aem-translate-module

Usage

Module Setup

Import the AemTranslateModule in your main AppModule and use the forRoot method to provide the configuration:

import { NgModule } from '@angular/core';
import { AemTranslateModule } from 'aem-translate-module';

@NgModule({
  imports: [
    // ... other imports
    AemTranslateModule.forRoot({ rootFilePath: '/content/path/to/translations.json' })
  ],
  // ... rest of your app module configuration
})
export class AppModule { }

Using the Translate Pipe

In your templates, use the translate pipe to translate keys:

<h1>{{ 'WELCOME_MESSAGE' | translate:'en' }}</h1>
<p [innerHTML]="'RICH_CONTENT' | translate:'en':{ isHtml: true }"></p>

Using the Translate Service

You can also use the AemTranslateService directly in your components:

import { Component } from '@angular/core';
import { AemTranslateService } from 'aem-translate-module';

@Component({
  selector: 'app-my-component',
  template: '...'
})
export class MyComponent {
  constructor(private translateService: AemTranslateService) {}

  translateKey(key: string, language: string) {
    this.translateService.getTranslations().subscribe(translations => {
      if (translations && translations[key] && translations[key][language]) {
        return translations[key][language];
      }
      return key; // fallback to key if translation not found
    });
  }
}

API Reference

AemTranslateModule

• forRoot(config: TranslationConfig): ModuleWithProviders<AemTranslateModule>
  • Configures the module for use in the root app module.
  • config.rootFilePath: Optional path to the root translation file.

AemTranslateService

• getTranslations(filePath?: string): Observable<any>
  • Retrieves translations from the specified file path or the default path.
• getInitialLoadState(): Observable<boolean>
  • Returns an Observable that emits true when the initial load is complete.
• isInitialLoadComplete(): boolean
  • Returns the current initial load state.

AemTranslatePipe

• transform(key: string, language: string, options?: { isHtml?: boolean; translationSource?: string | object }): Observable<string | SafeHtml>
  • Transforms a key into its translated value.
  • key: The translation key to look up.
  • language: The target language for translation.
  • options.isHtml: Whether the translation should be treated as HTML.
  • options.translationSource: Custom source for translations (string path or object).