title: How to show drop down list in Angular to choose one item from MySQL table?
body: <p>I have a database table <code>airline</code> and I want to show all data from the table in a <code>drop down list</code> and then to be able to choose one item from the list.</p>
  
  <p><a href="https://i.stack.imgur.com/3B3hB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3B3hB.png" alt="enter image description here"></a>  </p>
  
  <p>airline.ts</p>
  
  <pre><code>export class Airline {
    airline_id: number;
    name: string;
    symbol: string;
  }
  </code></pre>
  
  <p>My HTML code, that doesn't work (only shows drop down list without data inside):</p>
  
  <pre><code>&lt;mat-form-field&gt;
    &lt;mat-select placeholder="Airlines" [(ngModel)]="selectedValue" name="airline"&gt;
      &lt;mat-option *ngFor="let airline of airlines" [value]="airline.name"&gt;
        {{airline.symbol}}
      &lt;/mat-option&gt;
    &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>Actually it looks like this (without data inside the list):</p>
  
  <p><a href="https://i.stack.imgur.com/KA3p0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KA3p0.png" alt="enter image description here"></a></p>
  
  <p>airlineService.ts</p>
  
  <pre><code>export class AirlineService {
      private baseUrl = 'http://localhost:8080/api/airlines';
  
      constructor(private http: HttpClient) {
      }
  
      getAirline(airline_id: number): Observable&lt;Airline&gt; {
          return this.http.get&lt;Airline&gt;(`${this.baseUrl}/${airline_id}`);
      }
  
      getAirlinesList(): Observable&lt;any&gt; {
          return this.http.get(`${this.baseUrl}`);
      }
  }
  </code></pre>
  
  <p>airlines-list.component.ts</p>
  
  <pre><code>export class AirlinesListComponent implements OnInit {
      airlines: Observable&lt;Airline[]&gt;;
      airline_id: number;
      selectedValue: string;
  
      @Input() airline: Airline;
  
      constructor(private airlineService: AirlineService) { }
  
      ngOnInit() {
          this.reloadData();
      }
  
      reloadData() {
          this.airlines = this.airlineService.getAirlinesList();
      }
  }
  </code></pre>