title: How to bind selected value to dropdown in Angular 5
body: <p>I am working on Angular 5 application with dropdown. I have data coming from database, followed by mapped to javaScript object. I am trying to configure 'Selected' value but unable to do so. </p>
  
  <p>in following code, option: [] --> 'optionSelected' defined if is selected value by true or false, schema structure as;</p>
  
  <p><a href="https://i.stack.imgur.com/E5QN5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/E5QN5.png" alt="enter image description here"></a></p>
  
  <h2>component</h2>
  
  <pre><code> else  if(questionElementType=="dropdown")
   {
  
     let _dropBox = new DropdownQuestion({
       consultationId: questionsList[key].consultationId,
       questionId: questionsList[key].questionId,
       questionElementType: questionsList[key].questionElementType[0].title,          
       questionType: questionsList[key].questionType,
       title:questionsList[key].title,
       displayId: questionsList[key].displayId,
       key: questionsList[key].questionId,    
       label: questionsList[key].title,
       options:  questionsList[key].answerOptions.map(function(item){
         return {"key": item.preDefineAnswerOptionId, "value": item.text, "optionSelected": item.preDefineAnswerOptionId==questionsList[key].answer[0].answerValue? "true": "false" }
      }),        
       order: 1
     });
  
     this.mappedQuestions.push(_dropBox);
   }
  </code></pre>
  
  <h2>template</h2>
  
  <pre><code>  &lt;div *ngSwitchCase="'dropdown'"&gt; &lt;small&gt;dropdown&lt;/small&gt;
          &lt;div class="form-group"&gt;
              &lt;select [id]="question.key" [formControlName]="question.key"&gt;
                  &lt;option *ngFor="let opt of question.options" [value]="opt.key" [selected]="optionSelected"&gt;{{opt.value}}&lt;/option&gt;
              &lt;/select&gt;
          &lt;/div&gt;            
      &lt;/div&gt;  
  </code></pre>