title: How can I set selected attribute for my mat-option?
body: <p>I have the problem with my <code>mat-select</code> and <code>mat-option</code> control.
  I need to set selected attribute to the first <code>mat-option</code> control without binding on <code>[(ngModel)]</code> or <code>[(value)]</code>.
  My <code>mat-option</code> control is generated by <code>*ngFor</code> directive, but I don't need a property in my component, that usually binds on <code>[(ngModel)]</code> the <code>mat-select</code> UI control.
  So, I tried this:</p>
  
  <pre><code>&lt;mat-form-field&gt;
      &lt;mat-label&gt;Currency&lt;/mat-label&gt;
      &lt;mat-select #currencySelect&gt;
          &lt;mat-option *ngFor="let currency of currencies; let isFirst = first" [value]="currency" [attr.selected]="isFirst ? 'selected' : null"&gt;
              {{currency | currencyName}}
          &lt;/mat-option&gt;
      &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>and this:</p>
  
  <pre><code>&lt;mat-form-field&gt;
      &lt;mat-label&gt;Currency&lt;/mat-label&gt;
      &lt;mat-select #currencySelect&gt;
          &lt;div *ngFor="let currency of currencies; let isFirst = first"&gt;
              &lt;mat-option *ngIf="isFirst" selected [value]="currency"&gt;
                  {{currency | currencyName}}
              &lt;/mat-option&gt;
              &lt;mat-option *ngIf="!isFirst" [value]="currency"&gt;
                      {{currency | currencyName}}
              &lt;/mat-option&gt;
          &lt;/div&gt;
      &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>and only this gave me the desired effect:</p>
  
  <pre><code>&lt;mat-form-field&gt;
      &lt;mat-label&gt;Currency&lt;/mat-label&gt;
      &lt;mat-select #currencySelect [value]="currencies != null &amp;&amp; currencies.length != 0 ? currencies[0] : null"&gt;
          &lt;mat-option *ngFor="let currency of currencies;" [value]="currency"&gt;
              {{currency | currencyName}}
          &lt;/mat-option&gt;
      &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>but here I don't use selected attrubute. I use binding on the <code>[value]</code>, that I do not like terribly.</p>
  
  <p>I would like the code to be like this:</p>
  
  <pre><code>&lt;mat-form-field&gt;
      &lt;mat-label&gt;Currency&lt;/mat-label&gt;
      &lt;mat-select #currencySelect&gt;
          &lt;mat-option *ngFor="let currency of currencies; let isFirst = first" [value]="currency" [selected]="isFirst"&gt;
              {{currency | currencyName}}
          &lt;/mat-option&gt;
      &lt;/mat-select&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>How can I do that? 
  Once again, I don’t need a property in the component that identifies the selected item. It is important.</p>