Language list

The TranslatableLanguageList class is a slightly modified version of the TranslatableOptionList class that makes possible to change language directly:

// app.en.json
{
  ...
  "languages": {
    "en": "English",
    "it": "Italian",
    "hu": "Hungarian"
  },
  ...
}

<select (change)="changeLanguage( $event )">
  <option *ngFor="let language of languages"
          [value]="language.value"
          [selected]="language.selected">
    {{ language.text }}
  </option>
</select>

@Component({ ... })
export class AppComponent implements OnInit {

  languages: TranslatableLanguageList;

  constructor(
    private translate: TranslationService
  ) {
    this.languages = new TranslatableLanguageList( translate, 'app.languages' );
  }

  ngOnInit(): void {
    // Set the initial language.
    const s = this.translate.languageChanged
      .subscribe( language => {
        this.languages.selectedValue = language;
        s.unsubscribe();
      } );
  }

  changeLanguage(
    event: any
  ): void {
    this.languages.selectedValue = event.target.value;
  }
  ...
}