title: Angular 6 HTML select menu set default value
body: <p>I'm used to the older angularjs way of doing select menus and selecting the default value etc and am having trouble wrapping my head around how to do this in Angular (6).</p>
  
  <p>I have a an array of menu items:</p>
  
  <pre><code>  fontChoices = [
      {
        label: 'Trebuchet',
        value: "'Trebuchet MS', 'Helvetica Neue', Arial, sans-serif"
      },
      {
        label: 'Georgia',
        value: 'Georgia, times, serif'
      }
   ];
  </code></pre>
  
  <p>and a variable to hold the chosen font: <code>brandFont</code></p>
  
  <p>My html menu is</p>
  
  <pre><code>&lt;select [(ngModel)]="brandFont"
          id="brandFontmenu"
          (ngModelChange)="setStyle($event,'--font-family-brand')"&gt;
     &lt;option *ngFor="let font of fontChoices"
             [value]="font.value"&gt;{{font.label}}
     &lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>The menu works, displays my <code>fontChoices</code>, and changing the selection fires my function.  I can choose Georgia or Trebuchet and the css variable changes and the page updates as it should.</p>
  
  <pre><code>  setStyle(e, which) {
      document.documentElement.style.setProperty(which, e);
    }
  </code></pre>
  
  <p>On page load, the css variable is set to Trebuchet.  Which I can get in <code>ngOnInit</code> with</p>
  
  <pre><code>this.brandFont = String(styles.getPropertyValue('--font-family-brand')).trim();
  </code></pre>
  
  <p>My question is, how do I get the select menu to <em>display this first choice</em> on page load?  I have tried <code>this.brandFont = this.fontChoices[0];</code> but the menu selected item is empty until something is chosen from the menu.</p>