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:
There are 3 levels of setting the translation scope:
We can set it inside the lazy module providers:
We can set it in a component's providers:
We can set the
scope input in the
transloco structural directive:
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:
Now we can access each one of the
todos keys by using the
By default, the namespace will be the
scope name (camel cased), but we can override it by providing custom
alias name in the module/component
Now we can access it through
customName instead of the original scope name (
todos in our case):