Angular7/PrimeNG Dropdown does'nt display anything

Question

Following the instructions of https://www.primefaces.org/primeng/#/dropdown i'm trying to do one, but list options are not displayed.

Edit: It's fixed. I inderstood it wrong. I thought that i could get languages from an external class in order to reuse the component. Probably it's possible, but that's something i still don't know how to do. If someone could help me with that, i would really appreciate that.

Those are my classes:

Idioma.ts

export interface Idiomas {
  name: string;
  code: string;
}

export class Idioma{

  languages: Idiomas[];
  selectedLanguage:Idiomas;//Selected language unused

  constructor(){
    this.languages=[
      {name: 'Español', code: 'SPA'},
      {name: 'Deutsch', code: 'GER'},
      {name: 'български език', code: 'BUL'},
      {name: 'Hrvatski', code: 'CRO'},
      {name: 'Dansk', code: 'DEN'},
      {name: 'Dlovenčina', code: 'SLK'},
      {name: 'Slovenščina', code: 'SLN'},
      {name: 'Eesti keel', code: 'STN'},
      {name: 'Suomi', code: 'FIN'},
      {name: 'Français', code: 'FRA'},
      {name: 'Ελληνική γλώσσα', code: 'GRE'},
      {name: 'Nedarlands', code: 'HOL'},
      {name: 'Magyar', code: 'HUN'},
      {name: 'English', code: 'ENG'},
      {name: 'Italiano', code: 'ITA'},
      {name: 'Latviešu valoda', code: 'LET'},
      {name: 'Lietuvių kalba', code: 'LIT'},
      {name: 'Polski', code: 'POL'},
      {name: 'Portugués', code: 'POR'},
      {name: 'Čeština', code: 'CHE'},
      {name: 'Limba română', code: 'RUM'},
      {name: 'Svenska', code: 'SWE'}
    ]
  }
}

header.component.ts

import { Component, OnInit } from '@angular/core';
import {Idioma, Idiomas} from "../../classes/Idioma";//Idioma unused

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

  languages:Idioma[];
  selectedLanguage: Idioma;

  constructor() {

  }

  ngOnInit() {

  }

}

header.component.html

<p-dropdown [options]="languages" [(ngModel)]="selectedLanguage" optionLabel="name" placeholder="Idiomas"></p-dropdown>

And that's what i get:

When i click on the dropdown

What am i doing wrong?

To solve it a changed as follows:

app.module.ts

import {FormsModule} from "@angular/forms";

Idiomas.ts

export interface Idiomas {
  label: string;
  code: string;
}

header.component.ts

import { Component, OnInit } from '@angular/core';
import {Idiomas} from "../../classes/Idiomas";

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

  languages: Idiomas[];
  selectedLanguage:Idiomas;

  constructor(){
    this.languages=[
      {label: 'Español', code: 'SPA'},
      {label: 'Deutsch', code: 'GER'},
      {label: 'български език', code: 'BUL'},
      {label: 'Hrvatski', code: 'CRO'},
      {label: 'Dansk', code: 'DEN'},
      {label: 'Dlovenčina', code: 'SLK'},
      {label: 'Slovenščina', code: 'SLN'},
      {label: 'Eesti keel', code: 'STN'},
      {label: 'Suomi', code: 'FIN'},
      {label: 'Français', code: 'FRA'},
      {label: 'Ελληνική γλώσσα', code: 'GRE'},
      {label: 'Nedarlands', code: 'HOL'},
      {label: 'Magyar', code: 'HUN'},
      {label: 'English', code: 'ENG'},
      {label: 'Italiano', code: 'ITA'},
      {label: 'Latviešu valoda', code: 'LET'},
      {label: 'Lietuvių kalba', code: 'LIT'},
      {label: 'Polski', code: 'POL'},
      {label: 'Portugués', code: 'POR'},
      {label: 'Čeština', code: 'CHE'},
      {label: 'Limba română', code: 'RUM'},
      {label: 'Svenska', code: 'SWE'}
    ]
  }

  ngOnInit() {

  }

}

Answer 1

It should work with optionLabel="name". I am using it this way. You don't have any error in console ? Maybe in your real code you are getting your options asynchronuously and you have to wait for it to be ready ?

<p-dropdown *ngIf="!!languages" [options]="languages" [(ngModel)]="selectedLanguage" optionLabel="name" placeholder="Idiomas"></p-dropdown>