@lakea/gravity-translate-adapter-transloco

An adapter for GrTranslate using Transloco as implementation.

Installation

Install the library using NPM:

npm install @lakea/gravity-translate-adapter-transloco @ngneat/transloco --save

Next, create a new file, translate-adapter-root.module.ts which exposes an Angular's module with a default configuration.

import {NgModule} from '@angular/core';
import {GrTranslateAdapterTranslocoModule} from '@lakea/gravity-translate-adapter-transloco';

@NgModule({
  imports: [
    GrTranslateAdapterTranslocoModule.forRoot({
      availableLangs: ['en', 'es'],
      defaultLang: 'en',
      reRenderOnLangChange: true,
      prodMode: false, // get from your environments file
    }),
  ],
})
export class TranslateAdapterRootModule {}

Import TranslateAdapterRootModule to application root module like app.module.ts.

You should import the TranslateAdapterRootModule once in your root module.

The TranslateAdapterRootModule file imports the GrTranslateAdapterTranslocoModule which has all Transloco initial configs.

To configure transloco library, read the docs here.

Going forward, you need to provide a global app config injector with baseUrl property.

Add it to you app root module (maybe app.module.ts):

  providers: [
    {
      provide: 'APP_CONFIG',
      useValue: {
        // change for your app baseUrl
        // (don't miss to deal with prod url)
        baseUrl: 'http://localhost:4200'
      },
    },
  ]

baseUrl is used by TranslocoLoader to load translations file from assets.

Creating your own adapter

Create your adapter implementation class extending GrTranslate abstraction:

import {Injectable} from '@angular/core';
import {Observable} from 'rxjs';

import {HashMap} from '@lakea/gravity/cdk';
import {GrTranslate} from '@lakea/gravity/translate';

@Injectable()
export class GrTranslateAdapter extends GrTranslate {
  constructor() {
    super();
  }

  public activeLanguageChanges$(): Observable<string> {
    // YOUR IMPLEMENTATION
  }

  public changeActiveLanguage(lang: string): void {
    // YOUR IMPLEMENTATION
  }

  public getActiveLanguage(): string {
    // YOUR IMPLEMENTATION
  }

  public getAvailableLanguages(): string[] {
    // YOUR IMPLEMENTATION
  }

  public translate<T = string | string[]>(key: T, options?: HashMap): Observable<T> {
    // YOUR IMPLEMENTATION
  }
}

So, provide it on your application root module (maybe app.module.ts), like this:

  providers: [
    {
      provide: GrTranslate,
      useClass: GrTranslateAdapter,
    }
  ]