title: Set selected item in select list - Angular2
body: <p>I have the following data structure in my firebase table:</p>
  
  <p><a href="https://i.stack.imgur.com/QIAjW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QIAjW.png" alt="enter image description here"></a></p>
  
  <p>Inside my <code>Angular2</code> application I retrieve the entries and and display them in a <code>select list</code> as shown here: </p>
  
  <pre><code>&lt;select class="form-control" id="lookingFor" formControlName="gender" &gt;
     &lt;option value="" selected&gt;Please Select&lt;/option&gt;
     &lt;option *ngFor="let status of genderValue" [value]="status.id"&gt;{{ status.description}}&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>As you can see my first item in the list is a please select, this is selected by default before they have saved their profile.  The issue I have is when they have saved their profile and reloaded the edit profile page the selected value is of course 'please select' when it should be either male or female.</p>
  
  <p>After some searching I added the following attribute <code>[selected]</code> my code now looks like this:</p>
  
  <pre><code>&lt;select class="form-control" id="lookingFor" formControlName="gender" &gt;
         &lt;option value="" selected&gt;Please Select&lt;/option&gt;
         &lt;option *ngFor="let status of genderValue" [value]="status.id" [selected]="editProfileForm.controls.gender"&gt;{{ status.description}}&lt;/option&gt;
      &lt;/select&gt;
  </code></pre>
  
  <p>However when running the project, it selects <code>male</code> as default even if I delete the value from <code>Firebase</code> it'll always remain as male selected.</p>
  
  <p>Regarding what I'm doing inside my ts file, I simply call <code>Firebase</code> build the select list, then call get User Profile, I then pass the profile values into my form setup (reactive).</p>
  
  <p>So my question is, how can I have <code>Please Select</code> as selected if the user has not specified their gender, or if they have specified their gender then set the relevant item to selected.</p>
  
  <p>NOTE: I use the uniqueId generated by firebase as the value that is saved when the user saves their profile.</p>
  
  <p>This is the part where I configure my form:</p>
  
  <pre><code>// userProfile is returned from Firebase
  // gender will either have a value or it'll be null.
  this.editProfileForm = new FormGroup({
      seeking: new FormControl('', Validators.required),
      gender: new FormControl(this.userProfile.gender, Validators.required)
   });
  </code></pre>
  
  <p>After the editProfileForm has been configured, it clear shows the value of gender:</p>
  
  <p><a href="https://i.stack.imgur.com/m1dPO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m1dPO.png" alt="enter image description here"></a></p>