{ "id": "api/localize", "title": "@angular/localize", "contents": "\n\n
\n
\n
\n \n API\n
\n
\n mode_edit\n code\n
\n
\n \n
\n

@angular/localizelink

\n \n \n \n \n
\n\n \n\n
\n

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

\n\n

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

\n

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

\n\nconst message = $localize`Hello, World!`;\n\n
\n

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

\n

For example, the following code:

\n\nwarning = $localize`${this.process} is not right`;\n\n

could be replaced with:

\n\nwarning = \"\" + this.process + \", ce n'est pas bon.\";\n\n

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

\n
\n

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

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

would be compiled to something like:

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

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

\n\n\n \n\n\n \n

Entry pointslink

\n \n \n \n
\n

Primarylink

\n \n \n \n \n \n \n \n
@angular/localize\n \n

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

\n\n
\n
\n \n\n \n \n \n
\n

Secondarylink

\n \n \n \n \n \n \n \n
@angular/localize/init\n \n

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

\n\n
\n
\n \n\n \n\n

Primary entry point exportslink

\n \n \n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n
\n

Functionslink

\n \n \n \n \n \n \n \n \n \n \n \n \n
clearTranslations\n \n

Remove all translations for $localize, if doing runtime translation.

\n\n
loadTranslations\n \n

Load translations for use by $localize, if doing runtime translation.

\n\n
\n
\n \n\n \n \n \n\n \n \n \n\n \n \n \n\n \n \n \n\n
\n
\n\n\n" }