Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →To assign Angular translation-marked text a custom ID, add @@ followed by the ID in the message’s i18n metadata. In a template, use an i18n attribute; in component code, use a $localize tagged string. These IDs identify text for translation—they do not highlight text in the rendered interface.
Set a custom ID in a component template
Place the ID in the i18n attribute, prefixed by @@:
As an Amazon Associate I earn from qualifying purchases.
<h1 i18n="@@introductionHeader">Hello i18n!</h1>Angular’s translation extractor creates a translation unit for this marked text. The ID, introductionHeader, is the custom identifier for that unit. See Angular’s custom-ID guide.
Set a custom ID in component code
For a message in component code, use the same metadata syntax in a $localize tagged string:
#1 Best Overall
variableText = $localize`:@@introductionHeader:Hello i18n!`;Angular extracts $localize-tagged messages as translation units too. The template and code examples use the same ID here for illustration; in an application, each distinct message should have its own unique custom ID.
Add translator context to the metadata
Metadata can include a meaning and a description before the custom ID. The format is {meaning}|{description}@@{custom_id}:
<h1 i18n="site header|An introduction header for this sample@@introductionHeader">
Hello i18n!
</h1>Meaning identifies the message’s intent in context; description supplies additional context for translators. If one kind of context is unnecessary, the metadata can omit it while retaining the ID. Angular documents this syntax for marked messages and translatable element attributes; see Prepare component for translation.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesChoose between generated and custom IDs
Angular normally generates message IDs. The choice is mainly about your translation workflow and how you want source changes to be managed:
Rank #3
| Approach | When it fits | What happens when source text changes |
|---|---|---|
| Generated ID | Use it by default when your translation system does not require a particular ID format and a stable, descriptive identifier is not needed. | Angular’s generated ID normally changes when the translatable source text changes. |
| Custom ID | Use it when a translation system requires a particular ID format, or when a stable ID that conveys library, component, or application-area information is useful. | The ID remains the same. Review the corresponding translation when the source changes, since the identifier itself will not signal that the text has changed. |
These behaviors are described in Angular’s custom-ID documentation. For the broader localization context, see Angular v18’s internationalization overview.
Keep custom IDs unique
Give each distinct message a unique custom ID. If two different messages reuse one, Angular’s extractor extracts only the first message for that ID, and Angular can use that message’s translation for both elements. A consistent naming convention can help teams avoid collisions; for example, IDs can convey the relevant component or application area when that information is useful.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Remember what “marked text” means
In Angular’s internationalization guides, marked text is source text identified for translation. It is separate from changing an element’s appearance or behavior through an attribute directive. Angular’s attribute-directive guide covers that separate UI concept.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
