title: How to set initial value for select element in Angular ngrx?
body: <p>In Angular4/ngrx, how do we set a value as selected option in select box? </p>
  
  <p>The options are loaded via XHR. Both list of options / to be selected value is available in store.</p>
  
  <p>Here is the template:</p>
  
  <pre><code>  &lt;select class="form-control" (change)="onSelectOperator($event.target.value)"&gt;
        &lt;option *ngFor="let operator of operator$ | async"&gt;{{operator.name}}&lt;/option&gt;
    &lt;/select&gt;
  </code></pre>
  
  <p>Store:</p>
  
  <pre><code>  export const initialState = {
      operators: [], // to be loaded via XHR
      selected: 'All'
    };
  </code></pre>
  
  <p>Component: </p>
  
  <pre><code>  ngOnInit() {
  
      this.loadOperators();
      // assign observable
      this.operators$ = this.store.select(getOperators);
    }
  </code></pre>
  
  <p>After load, <code>selected</code> value in store should be set as initial value for the select box. This will be present in the XHR response list.</p>
  
  <p>The angular 1 equivalent would be to use two way binding and set value to ng-model. How does this translate into Angular4/ngrx?</p>