title: Angular 5 Set selected value of HTML Select Element
body: <p>Here is what I'm trying to do:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;select name="manager" id="manager" [(ngModel)]="property.manager" class="form-control" (change)="onChangeManager($event)" required&gt;
    &lt;option disabled value=""&gt;Select Manager&lt;/option&gt;
    &lt;option *ngFor="let manager of managers" [ngValue]="manager" [selected]="manager?.name === 'Subhan Ahmed'"&gt;
      {{manager?.name}}
    &lt;/option&gt;
  &lt;/select&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What I need is when the view is initialised, I need to set the value of the select where <code>manager?.name == property.manager.name</code> (which is loaded from db on on another event). I've tried to place a default text <code>Subhan Ahmed</code> to select the default value but its not working. </p>
  
  <p>Managers are loaded at the start, I load them from Firestore and assign them to a variable <code>managers: Observable&lt;Manager&gt;;</code> during <code>subscribe()</code>, while <code>property.manager</code>is loaded after another input's change event.</p>
  
  <p>Am i missing something?</p>