Switching language

To manage language changes, inject TranslateService.

In Angular 20, a convenient pattern is exposing languageAsync as a signal and calling changeLanguage() from an event handler.

language.component.ts

import { Component, inject } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { TranslateService } from '@tolgee/ngx';

@Component({
  template: `
    <select [value]="language()" (change)="changeLanguage($event.target.value)">
      <option value="en">🇬🇧 English</option>
      <option value="cs">🇨🇿 Česky</option>
    </select>
  `,
})
export class LanguageComponent {
  private readonly translateService = inject(TranslateService);

  readonly language = toSignal(this.translateService.languageAsync, {
    requireSync: true,
  });

  async changeLanguage(value: 'en' | 'cs') {
    await this.translateService.changeLanguage(value);
  }
}

Learn more about language change, detection and storage on the Language documentation page.