How do you handle internationalization (i18n) in Angular?

Q: How do you handle internationalization (i18n) in Angular?

**Target Audience:** Angular developers who need to ship an app in more than one language; no localisation experience assumed. **Difficulty:** Medium > **How to read this doc:** Ideas are explained in plain language first, then tagged with 📌 Interview term: so you also learn the words an interviewer listens for. Every command and output in sections 4 to 6 was run with Angular CLI 22.2.3 on Node 24 in a copy of a fresh ng new app with SSR prerendering enabled, offline. ng add itself was not run (it installs from the network); the @angular/localize package was copied in and its ng-add schematic run directly. Serving locales from a real web server was not tested. ## 1. Why This Even Matters — A Story First A publisher wants a novel in English and French. One approach: print the English book, and glue a little French sticker over every sentence, peeled off and re-stuck whenever a reader changes their mind. Another: send t

The problem

Question presented to candidate: "We need our Angular app in English and French, with correct plurals, dates and currencies, and the marketing team wants French URLs to be indexable. How do you internationalise an Angular app, and what does the build produce?"

What a strong answer should cover:

@angular/localize (ng add @angular/localize); mark templates with i18n, attributes with i18n-<attr>, code with $localize.
Message IDs: generated by default, custom with @@id; meaning and description for translators.
ICU expressions for plural and select.
ng extract-i18n produces XLIFF (or JSON, ARB, XMB); translators return per-locale files.
angular.json i18n.sourceLocale / locales and localize: true: one build per locale, own folder, <base href> and lang.
LOCALE_ID drives DatePipe, CurrencyPipe, DecimalPipe.
Trade-offs: build-time (fast, needs a reload to switch) vs runtime libraries; missing-translation handling; SSR hydration with withI18nSupport().

Clarifying questions expected:

"Must users switch language without reloading the page?"
"How will the server route /fr/ and /en-US/ to the right build?"

Code / implementation expected: Yes — a marked-up template with an ICU plural, and the translation workflow.

i18n

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Angular developers who need to ship an app in more than one language; no localisation experience assumed. Difficulty: Medium

How to read this doc: Ideas are explained in plain language first, then tagged with 📌 Interview term: so you also learn the words an interviewer listens for. Every command and output in sections 4 to 6 was run with Angular CLI 22.2.3 on Node 24 in a copy of a fresh ng new app with SSR prerendering enabled, offline. ng add itself was not run (it installs from the network); the @angular/localize package was copied in and its ng-add schematic run directly. Serving locales from a real web server was not tested.

1. Why This Even Matters — A Story First

A publisher wants a novel in English and French. One approach: print the English book, and glue a little French sticker over every sentence, peeled off and re-stuck whenever a reader

The solution is hidden so you can try first

10 min read · 11 sections

Read the code

AngularA component marked for translation: i18n attributes, an ICU plural, $localize and locale-aware pipes

import { Component, LOCALE_ID, inject, signal } from '@angular/core';
import { CurrencyPipe, DatePipe, DecimalPipe } from '@angular/common';

@Component({
  selector: 'app-root',
  imports: [CurrencyPipe, DatePipe, DecimalPipe],
  template: `
    <h1 i18n="Shop header|Greeting at the top of the home page@@homeWelcome">Welcome to the shop</h1>
    <img src="logo.png" i18n-alt alt="Shop logo" width="40" height="40" />
    <p i18n>You have {count(), plural, =0 {no items} =1 {one item} other {{{count()}} items}} in your basket.</p>
    <p>{{ title }}</p>
    <p>{{ 1234567.891 | number }} | {{ 1299.5 | currency: 'EUR' }} | {{ day | date: 'fullDate' }}</p>
    <small>LOCALE_ID = {{ locale }}</small>
  `,
})
export class App {
  protected readonly count = signal(3);
  protected readonly title = $localize`:@@pageTitle:Products on sale`;
  protected readonly day = new Date(Date.UTC(2026, 9, 16, 12));
  protected readonly locale = inject(LOCALE_ID);
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.