title: How to dynamically set selected drop down value in Angular 5
body: <p>I am trying to set the selected value of a drop down in Angular 5.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;mat-form-field class="col-sm-3"&gt;
     &lt;mat-select placeholder="State" name="state [formControl]="stateFormControl" required&gt;
       &lt;mat-option *ngFor="let state of states" value="{{state.key}}"&gt;{{state.name}}
       &lt;/mat-option&gt;
     &lt;/mat-select&gt;
     &lt;mat-error *ngIf="stateFormControl.hasError('required')"&gt;State is required
     &lt;/mat-error&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>TypeScript:</p>
  
  <pre><code>stateFormControl = new FormControl('', [
      Validators.required
  ]);
  
  this.vendorForm.controls["state"].setValue(this.state);
  </code></pre>
  
  <p>Even when I set the default value in the FormControl declaration, nothing is being set by default for the drop down.</p>