title: Angular 2: How to make an option in a select to selected based on a condition?
body: <p>I'm building a select element in a form from an array of objects. I want one of the options to be selected based on an attribute of the current object (<code>myobject.is_default</code>).</p>
  
  <p>The basic template code looks like this:</p>
  
  <pre><code>&lt;select formControlName="template"&gt;
    &lt;option *ngFor="let t of templates" [value]="t.id"&gt;{{t.title}}&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>I could now set the select option like this:</p>
  
  <pre><code>&lt;select formControlName="template"&gt;
    &lt;option *ngFor="let t of templates" [value]="t.id" [selected]="t.is_default ? 'selected' : ''"&gt;{{t.title}}&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>But the problem I'm having is the HTML5 specs which state:</p>
  
  <blockquote>
    <p>The selected attribute is a boolean attribute.</p>
    
    <p><a href="http://www.w3.org/TR/html5/infrastructure.html#boolean-attributes" rel="nofollow">http://www.w3.org/TR/html5/infrastructure.html#boolean-attributes</a> :</p>
    
    <p>The presence of a boolean attribute on an element represents the true
    value, and the absence of the attribute represents the false value.</p>
    
    <p>If the attribute is present, its value must either be the empty string
    or a value that is an ASCII case-insensitive match for the attribute's
    canonical name, with no leading or trailing whitespace.</p>
  </blockquote>
  
  <p>The following are valid, equivalent and true:</p>
  
  <pre><code>&lt;option selected /&gt;
  &lt;option selected="" /&gt;
  &lt;option selected="selected" /&gt;
  &lt;option selected="SeLeCtEd" /&gt;
  </code></pre>
  
  <p>The following are invalid:</p>
  
  <pre><code>&lt;option selected="0" /&gt;
  &lt;option selected="1" /&gt;
  &lt;option selected="false" /&gt;
  &lt;option selected="true" /&gt;
  </code></pre>
  
  <p>That means: As soon as the selected attribute is present, the option is selected. So I need a way of not having the <code>selected</code> in all but one option.</p>
  
  <p>I cannot use <code>ngIf</code> since it cannot be used together with <code>ngFor</code> on the same element.</p>