Sign in
Skip to solution
mediumFrontend

How do you handle internationalization (i18n) in Angular?

335 views
01

Understand the problem

Describe Angular i18n tooling, translation files, and compile options.

i18n
02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

Angular has built-in i18n features: you mark template text with i18n attributes, run ng extract-i18n to generate source translation files (XLIFF), and compile translations during build or dynamically translate text using @angular/localize runtime APIs.

Solution ready — 2 min read

Classified // press E to declassify

04

Read the code

Declaring static translation nodes in templates
import { Component } from '@angular/core';

@Component({
  selector: 'app-welcome',
  standalone: true,
  template: '<h1 i18n="Site greeting@@welcomeMsg">Hello World</h1>' +
    '<img i18n-alt alt="User profile icon" src="avatar.jpg" />'
})
export class WelcomeComponent {}
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 69 of 121 decoded in the Angular track. One more won't hurt.

Back to track