Hack The Library

The Loader#

The loader provides you with the ability to override the default handling of translation file loading.

import { TranslocoLoader } from '@ngneat/transloco';

export class CustomLoader implements TranslocoLoader {
  getTranslation(lang: string) {
    if(langInLocalStorage) {
      return of(langFromStorage);
    }

    return ...
  }
}

export const customLoader = {
  provide: TRANSLOCO_LOADER,
  useClass: CustomLoader
}

The Interceptor#

The interceptor provides you with the ability to manipulate the translation object before it is saved by the service.

import { TranslocoInterceptor } from '@ngneat/transloco';

export class CustomInterceptor implements TranslocoInterceptor {
  preSaveTranslation(translation: Translation, lang: string): Translation {
    return translation;
  }

  preSaveTranslationKey(key: string, value: string, lang: string): string {
    return value;
  }
}

export const customInterceptor = {
  provide: TRANSLOCO_INTERCEPTOR,
  useClass: CustomInterceptor
};

Missing Handler#

This handler is responsible for handling missing keys. The default handler calls console.warn() with the key when config.isProdMode is set to false, and returns an empty string to use as a replacement for the missing key's value.

import { TranslocoMissingHandler } from '@ngneat/transloco';

export class CustomHandler implements TranslocoMissingHandler {
  handle(key: string, config: TranslocoConfig) {
    return '...';
  }
}

export const customMissingHandler = {
  provide: TRANSLOCO_MISSING_HANDLER,
  useClass: CustomHandler
};

Fallback Strategy#

The fallback strategy is responsible for loading the fallback translation file, when the selected active language has failed to load. The default behavior is to load the language set in the config.fallbackLang, and set it as the new active language.

When you need more control over this functionality, you can define your own strategy:

import { TranslocoFallbackStrategy } from '@ngneat/transloco';

export class CustomStrategy implements TranslocoFallbackStrategy {
  getNextLangs(failedLang: string) {
    return '...';
  }
}

export const customFallbackStrategy = {
  provide: TRANSLOCO_FALLBACK_STRATEGY,
  useClass: CustomStrategy
};

The getNextLangs method is called with the failed language, and should return an array containing the next languages to load, in order of preference.