Angular Academy · Lesson

Marking Text for Translation

Use i18n attributes to mark translatable text.

Marking Text for Translation is a free Angular Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Internationalization Solves

Internationalization (i18n) is preparing your app so its text can be translated into other languages without changing the code. Angular has a built-in i18n system based on marking translatable text in templates with the i18n attribute.

The i18n Attribute

Add the i18n attribute to any element whose text should be translated. Angular collects these at build time and replaces the content per locale.

<h1 i18n>Welcome to our store</h1>
<p i18n>Choose a product to begin.</p>

Translating Attributes

To translate an HTML attribute (like title or placeholder), prefix it with i18n-.

<input placeholder="Search" i18n-placeholder />
<img src="logo.png" alt="Company logo" i18n-alt />

Meaning and Description

You can give translators context with the syntax i18n="meaning|description". The meaning groups identical phrases that should share one translation; the description explains usage.

<button i18n="cta|The main call to action on the home page">Get started</button>

Custom IDs

Add a stable custom ID after @@ so a translation survives text edits. Without it, changing the source text generates a new ID and loses the existing translation.

<h1 i18n="@@homeTitle">Welcome to our store</h1>

Interpolations in Translated Text

Bindings inside translated text become placeholders. Translators see a named token they can reposition for their language.

<p i18n>Hello, {{ name }}! You have {{ count }} new messages.</p>

Marking Text in Components with $localize

For strings in TypeScript (not templates), tag them with $localize. It marks the string for extraction just like the i18n attribute does for templates.

const greeting = $localize('Welcome back'); // tagged-template form, marked for extraction

Why Not Just Concatenate Strings

Hardcoding and concatenating text ('You have ' + n + ' items') breaks translation: word order differs per language and plural rules vary. Marking whole phrases with i18n keeps grammar intact for translators.

Translating Nested Markup

When translatable text contains child elements, Angular preserves them as placeholders so translators cannot accidentally drop the markup.

<p i18n>Read our <a href="/terms">terms of service</a> before continuing.</p>

Keeping Source Text Clean

Mark text at the smallest sensible unit, usually a full sentence or label. Avoid splitting one sentence across multiple i18n blocks, since each fragment becomes a separate, harder-to-translate string.

What Happens at Build Time

The i18n attribute itself produces no runtime cost: Angular replaces marked text during compilation for each locale, generating a separate optimized bundle. We extract and translate those strings in the next lessons.

Quick Check

How do you translate a placeholder attribute?

Recap

Mark template text with the i18n attribute and attributes with i18n-attr. Add meaning|description for context and @@customId for stable IDs. Bindings become placeholders, and TypeScript strings use $localize. Marking happens with zero runtime cost.

Frequently asked questions

Is the “Marking Text for Translation” lesson free?

Yes — the full text of “Marking Text for Translation” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.

What will I learn in “Marking Text for Translation”?

Use i18n attributes to mark translatable text. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Angular Academy?

No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Marking Text for Translation” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Angular Academy lesson?

Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Angular Academy