Switching to Angular - Third Edition

Using select inputs with Angular

As the next step, we should allow the user of the application to enter the technology in which the input developer has the most proficiency. We can define a list of technologies and show them in the form as a select input.

In the AddDeveloper class, add the technologies property:

class AddDeveloper { 
  ... 
  technologies: string[] = [ 
    'JavaScript', 
    'C', 
    'C#', 
    'Clojure' 
  ]; 
  ... 
} 

Now, in the template, just above the Add button, add the following markup:

<div class="form-group"> 
  <label class="control-label" 
         for="technologyInput">Technology</label> 
  <div> 
    <select class="form-control" name="technology" required 
            [(ngModel)]="developer.technology"> 
        <option *ngFor="let technology of technologies" [value]="technology"> ...