The @angular/localize package contains helpers and tools for localizing your application.

You should install this package using ng add @angular/localize if you need to tag text in your application that you want to be translatable.

The approach is based around the concept of tagging strings in code with a template literal tag handler called $localize. The idea is that strings that need to be translated are “marked” using this tag:

const message = $localize`Hello, World!`;

This $localize identifier can be a real function that can do the translation at runtime, in the browser. But, significantly, it is also a global identifier that survives minification. This means it can act simply as a marker in the code that a static post-processing tool can use to replace the original text with translated text before the code is deployed.

For example, the following code:

warning = $localize`${this.process} is not right`;

could be replaced with:

warning = "" + this.process + ", n'est pas bon.";

The result is that all references to $localize are removed, and there is zero runtime cost to rendering the translated text.

The Angular template compiler also generates $localize tagged strings rather than doing the translation itself. For example, the following template:

<h1 i18n>Hello, World!</h1>

would be compiled to something like:

ɵɵelementStart(0, "h1"); //  <h1>
ɵɵi18n(1, $localize`Hello, World!`); //  Hello, World!
ɵɵelementEnd(); //  </h1>

This means that after the Angular compiler has completed its work, all the template text marked with i18n attributes have been converted to $localize tagged strings, which can be processed just like any other tagged string.

Entry points

Primary

@angular/localize

The @angular/localize package contains helpers and tools for localizing your application.

Secondary

@angular/localize/init

The @angular/localize package exposes the $localize function in the global namespace, which can be used to tag i18n messages in your code that needs to be translated.

Primary entry point exports

Functions

clearTranslations	Remove all translations for $localize, if doing runtime translation.
loadTranslations	Load translations for use by $localize, if doing runtime translation.

Types

MessageId	A string that uniquely identifies a message, to be used for matching translations.
TargetMessage	A string containing a translation target message.