iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
To assign Angular translation-marked text a custom ID, add the ID after @@ in the message’s i18n metadata. In a template, use an i18n attribute; in component code, use a $localize tagged string. Custom IDs stay stable when source text changes, so use them when your translation workflow needs a particular ID or meaningful identifiers—and review translations whenever that text changes.
What “marked text” means in Angular
In Angular’s internationalization system, marked text is source text identified for translation. It is not text highlighted visually in the rendered interface. Angular’s extractor creates translation units from template text marked with i18n and from $localize tagged message strings in component code. See Angular’s custom-ID guide and its translation preparation guide.
Add a custom ID to a template message
Place i18n on the element containing the translatable text, then put @@ and the chosen ID in the attribute value:
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problems<h1 i18n="@@introductionHeader">Hello i18n!</h1>Here, introductionHeader is the custom ID Angular associates with the message in the extracted translations.
#1 Best Overall
Add a custom ID to a message in component code
For a translatable string in TypeScript, use a $localize tagged message and place the ID in its metadata:
variableText = $localize`:@@introductionHeader:Hello i18n!`;The metadata appears between the opening backtick and the message text, separated from the text by a colon.
Add meaning and description for translator context
Custom IDs can be combined with metadata that helps translators understand a message. Angular’s format is {meaning}|{description}@@{custom_id}: meaning communicates the message’s intent in context, while description supplies translator-facing context.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →<h1 i18n="site header|An introduction header for this sample@@introductionHeader">
Hello i18n!
</h1>For translatable element attributes, Angular also supports i18n-{attribute_name}, using the same metadata format. The translation preparation guide documents the marking and metadata syntax.
Rank #3
Choose between generated and custom IDs
Angular normally generates message IDs from translatable source text. The choice is mainly about how your translation workflow identifies messages and handles source changes.
| Approach | When it fits | Behavior when source text changes |
|---|---|---|
| Generated ID | Use it for most applications when the translation workflow does not require a prescribed ID syntax or meaningful stable IDs. | The ID normally changes with the translatable source text. |
| Custom ID | Use it when a translation system requires a particular ID format, or when a stable ID meaningfully identifies a library, component, or application area. | The ID stays the same, so the identifier itself does not signal that the source text changed; review the corresponding translation. |
Keep custom IDs unique
Assign different messages different custom IDs. If distinct messages reuse one ID, Angular’s extractor extracts only the first; Angular can then use that message’s translation for both elements. Establish a naming convention that makes ownership or context clear, and check for duplicate IDs as part of translation maintenance.
Review translations after changing source text
A stable custom ID avoids changing the message identifier when you edit source text, but it does not guarantee that the existing translation still matches the updated wording or intent. Whenever source text changes under a custom ID, review the corresponding translation explicitly. Including meaning and description can help translators interpret the message, but it does not replace that review.
Keep i18n marking separate from visual highlighting
Angular also documents attribute directives that change an element’s appearance or behavior, including a hover-highlighting example. Those interface effects are separate from marking source text for translation; see Angular’s attribute directives guide. For the broader localization guide set, Angular’s v18 internationalization overview provides version-specific context.
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.
