LogoLogo
โค๏ธ SponserMore
  • ๐Ÿš€Getting Started
    • Installation
    • Angular Compatibility
    • Config Options
  • ๐Ÿ’กCore Concepts
    • Translation in the Template
    • Signals
    • Translation API
    • Language API
  • ๐Ÿง Advanced Topics
    • ๐ŸฆฅLazy Load
      • Scope Configuration
      • Inline Loaders
    • The Transpiler
    • SSR Support
    • Unit Testing
    • Hack the Library
  • ๐ŸงชSandbox & Examples
  • โš™๏ธAdditional Functionality
    • Loading Template
    • Key Referencing
    • Utility Functions
    • Comments for Translators
    • Multiple Languages Simultaneously
  • ๐Ÿ“ฆMigration Guides
    • Migrate from ngx-translate
    • Migrate from Angular's i18n
  • ๐Ÿ”งTools
    • Keys Manager (TKM)
      • Keys Extractor
      • Keys Detective
      • Options
      • Debugging
      • Using with Nx ๐Ÿ‹
    • Validator
    • Optimize
    • Scoped Library Extractor
  • ๐Ÿ”ŒPlugins
    • Message Format
    • Persist Translations
    • Persist Lang
    • Preload Langs
    • Locale l10n
    • Community Plugins
  • ๐ŸงฐSchematics
    • :ng-add
    • :scope
    • :join
    • :split
  • ๐ŸณRecipies
    • Prefetch User Language
    • Using Xliff
    • Generate Locale Files using Google Translate
  • ๐Ÿ“šBlog Posts
    • Transloco Team Posts
      • Transloco Goes Functional: A Guide to Transloco's Functional Transpiler
    • From the Community
  • โ“FAQs
Powered by GitBook

@ 2025 Transloco

On this page
  • reRenderOnLangChange
  • defaultLang
  • fallbackLang
  • failedRetries
  • prodMode
  • availableLangs
  • missingHandler.allowEmpty
  • missingHandler.useFallbackTranslation
  • missingHandler.logMissingKey
  • flatten.aot
  • interpolation
  • scopes.keepCasing v7.5.0+

Was this helpful?

  1. Getting Started

Config Options

reRenderOnLangChange

For applications that don't allow users to change the language dynamically (e.g., via a dropdown), set this to false. This will save memory by rendering the view once and unsubscribing from the language change event. (Defaults to false.)

translocoConfig({
  reRenderOnLangChange: boolean,
});

defaultLang

Sets the default language for the application. (Defaults to 'en'.)

translocoConfig({
  defaultLang: 'en',
});

fallbackLang

Defines one or more fallback languages to use when a translation is unavailable. See the TranslocoFallbackStrategy section for customization options.

translocoConfig({
  fallbackLang: 'en',
  fallbackLang: ['en', 'ru'],
});

failedRetries

Specifies the number of retries for loading translation files in case of failure. (Defaults to 2.)

translocoConfig({
  failedRetries: 1,
});

prodMode

Indicates whether the application is running in production mode. (Defaults to false.) When enabled, Transloco will disable all console warnings.

import { isDevMode } from '@angular/core';

translocoConfig({
  prodMode: !isDevMode(),
});

availableLangs

Lists the available languages in your application.

translocoConfig({
  availableLangs: ['en', 'es'],
});

missingHandler.allowEmpty

Specifies whether to allow empty values when a translation is missing. (Defaults to false.)

translocoConfig({
  missingHandler: {
    allowEmpty: true,
  },
});

missingHandler.useFallbackTranslation

Determines whether to use the fallback language for missing keys or values. (Defaults to false.)

translocoConfig({
  fallbackLang: 'en',
  missingHandler: {
    useFallbackTranslation: true,
  },
});

missingHandler.logMissingKey

Specifies whether to log a warning to the console when a translation key is missing. (Defaults to true.)

translocoConfig({
  missingHandler: {
    logMissingKey: false,
  },
});

flatten.aot

Check the optimization plugin for Ahead-of-Time (AOT) compilation.

import { isDevMode } from '@angular/core';

translocoConfig({
  flatten: {
    aot: !isDevMode(),
  },
});

interpolation

Defines the start and end markers for parameters in translations. (Defaults to ['{{', '}}'].)

translocoConfig({
  // This allows specifying parameters like: `"Hello <<<value>>>"`
  interpolation: ['<<<', '>>>'],
});

scopes.keepCasing v7.5.0+

Ensures that the casing of the scope name is preserved unless an alias has been set. If no alias is set, this option will be ignored.

translocoConfig({
  scopes: {
    keepCasing: false,
  },
});

This version aims to clarify the purpose of each option and maintain a consistent style for code examples.

PreviousAngular CompatibilityNextCore Concepts

Last updated 5 months ago

Was this helpful?

๐Ÿš€