Scope Configuration

important

Note that scopes follow Angular DI rules. They only work when declared in a lazy load module, or a component's providers.

Let's say we have a todos page and we want to create separate translation files for this page, and load them only when the user navigates there. First, we need to create a todos folder (or whatever name you choose); In it, we create a translation file for each language we want to support:

├─ i18n/
   ├─ en.json
   ├─ es.json
   ├─ todos/
      ├─ en.json
      ├─ es.json

There are 3 levels of setting the translation scope:

Lazy Module Providers

Standalone

We can set it inside the lazy route providers:

todos.routes.ts

import { Route } from '@angular/router';
import { provideTranslocoScope } from '@jsverse/transloco';

export const TODO_ROUTES: Route = {
  path: '',
  loadComponent: () =>
    import('./todos.component').then((TodosComponent) => TodosComponent),
  providers: [provideTranslocoScope('todos')],
};

We also can provide several scopes at once:

core.module.ts

import { Route } from '@angular/router';
import { provideTranslocoScope } from './transloco.providers';

export const TODO_ROUTES: Route = {
  path: '',
  loadComponent: () =>
    import('./todos.component').then((TodosComponent) => TodosComponent),
  providers: [
    provideTranslocoScope('todos', { scope: 'shared', alias: 'sharedAlias' }),
  ],
};

NgModule

We can set it inside the lazy module providers:

todos.module.ts

import { provideTranslocoScope } from '@jsverse/transloco';

const routes: Routes = [
  {
    path: '',
    component: TodosComponent,
  },
];

@NgModule({
  declarations: [TodosComponent],
  providers: [provideTranslocoScope('todos')],
  imports: [RouterModule.forChild(routes), TranslocoModule],
})
export class TodosModule {}

Component's Providers

We can set it in a component's providers:

todos.component.ts

@Component({
  selector: 'my-comp',
  templateUrl: './my-comp.component.html',
  providers: [provideTranslocoScope('todos')],
})
export class MyComponent {}

Inline Input

We can set the scope input in the transloco structural directive:

todos.component.html

<ng-container *transloco="let t; scope: 'todos';">
  <h1>{{ t('todos.keyFromTodos') }}</h1>
</ng-container>

Each one of these options tells Transloco to load the corresponding scope based on the active language and merge it under the scope namespace into the active language translation object.

For example, if the active language is en, it will load the todos/en.json file, and will set the translation to be the following:

{
  "header": "",
  "login": "",
  "todos": {
    "submit": "",
    "title": ""
  }
}

Now we can access each one of the todos keys by using the todos namespace:

todos.component.html

<ng-container *transloco="let t">
  <h1>{{ t('todos.title') }}</h1>
</ng-container>

{{ 'todos.title' | transloco }}

<span transloco="todos.submit"></span>

Scope's namespace

By default, the namespace will be the scope's name camel-cased. you can keep the original casing by providing the scope.keepCasing config option.

You can also provide a custom scope namespace by specifying an alias name in the module/component scope provider:

provideTranslocoScope({ scope: 'todos', alias: 'customName' });

Now we can access it through customName instead of the original scope name (todos in our case):

todos.component.html

<ng-container *transloco="let t">
  <h1>{{ t('customName.title') }}</h1>
</ng-container>

{{ 'customName.title' | transloco }}

<span transloco="customName.submit"></span>