Back to results for “Internationalization”
Angular › Internationalization (i18n) in Angular

How would you let a user switch the display language of an Angular app using a simple dropdown menu?

Beginner

Answer

With a runtime translation approach like ngx-translate, you store the currently selected language and call the service's use method whenever the user picks a new option, letting all translated text on the page update immediately without needing to reload the browser.
<select (change)="switchLanguage($event.target.value)">
  <option value="en">English</option>
  <option value="fr">French</option>
</select>

switchLanguage(lang: string) {
  this.translate.use(lang);
}
Real-world example A website's header includes a simple language dropdown, and choosing a new language instantly updates every piece of translated text on the page, without needing to reload the browser.

Common follow-ups: How would you remember the user's chosen language the next time they visit the site?;Should the selected language also affect how dates and numbers are formatted?