🅰️ Angular Intermediate

What is Angular i18n (internationalization)?

Why Interviewers Ask This

This tests whether you can apply Angular knowledge to real-world scenarios. Interviewers are looking for clarity of thought and evidence that you've encountered this in production code.

Answer

Angular's built-in internationalization (i18n) support enables creating multilingual applications. Marking text for translation: add the i18n attribute to elements: <h1 i18n="@@welcomeTitle">Welcome</h1>. The @@ prefix defines a custom ID. For attributes: <input i18n-placeholder="@@searchPlaceholder" placeholder="Search">. Workflow: (1) Mark content in templates with i18n; (2) Extract messages: ng extract-i18n --output-path src/locale — generates messages.xlf (XLIFF format); (3) Create locale-specific files: messages.fr.xlf, messages.es.xlf; (4) Translators fill in the translations; (5) Build for each locale: ng build --localize — produces separate builds per locale. Configuration in angular.json: "i18n": { "sourceLocale": "en-US", "locales": { "fr": "src/locale/messages.fr.xlf" } }, "build": { "options": { "localize": true } }. Runtime i18n (Angular 9+): serve different locale builds from different URLs. Deploy multiple builds (en/, fr/) and route based on browser preference or user selection. Third-party alternatives: ngx-translate — runtime translation switching without multiple builds; transloco — modern, powerful i18n library with lazy loading of translation files. Angular's built-in i18n produces optimal bundles per locale; ngx-translate/transloco allow runtime language switching from one build.

Common Mistake

Don't just define the term — demonstrate that you understand when to use it and when not to. Showing awareness of trade-offs is what separates average from strong Angular candidates.