Angular Academy · Lesson

Marking Text for Translation

Use i18n attributes to mark translatable text.

Lesson 1 of 413 steps

Marking Text for Translation is a free Angular Academy lesson on CoddyKit. This is lesson 1 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, and your progress syncs across the web and the CoddyKit app. The Angular Academy course includes 4 lessons in total.

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?

Answer it in the interactive lesson

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.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 38
Lessons: 144

Start learning free View the full course

Frequently Asked Questions

Is the “Marking Text for Translation” lesson free?

Yes — any 3 lessons of the Angular Academy learning path, including “Marking Text for Translation”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Angular Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 4.

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