I'm using ngx-translate in project. I have created files en.json and it.json inside assets/i18n In component language I write this code:

ngOnInit(): void {
    this.translate.addLangs([
      'it',
      'en'
  ]);
    this.translate.setDefaultLang('it');
    const browserLang = this.translate.getBrowserLang();
    this.translate.use(browserLang.match(/it/) ? browserLang : 'it');
  }

in html:

<div >
    <label for="language">{{'LABEL.LINGUA' | translate }} &nbsp;</label>
        <select #langSelect (change)="translate.use(langSelect.value)"  id="language"> 
          <option *ngFor="let lang of translate.getLangs()" [value]="lang" [selected]="lang === translate.currentLang">{{ lang }}</option>
        </select>   
</div>

This code works very well, in page showed a dropdown with option it and en

I want to change my code, because in page I must show option Italian and English, not it and en.

I can also do it by changing the names from it to Italian and en to English, but I think there could be a better solution than this.

CodePudding user response：

export const LANGUAGES: Array<{ name: string; code: string }> = [
    { name: 'English', code: 'EN' },
    { name: 'Português (BR)', code: 'PT_BR' },
    { name: 'Japanese', code: 'JA' },
    { name: 'Italiano', code: 'IT' },
    { name: 'Français', code: 'FR' },
    { name: 'Español', code: 'ES' },
    { name: 'German', code: 'DE' }
];

And in HTML you can itterate through the language list