title: Update "autofocus" attribute via interaction on template level in angular
body: <p>Having a problem regarding the <code>autofocus</code> attribute in cooperation with Angular. In detail I have a <code>&lt;form&gt;</code> with an <code>&lt;input type="text"&gt;</code> on top which is initially focussed by a condition.</p>
  
  <pre><code>&lt;input [attr.autofocus]="selection===-1"
         [(ngModel)]="myForm.firstInpElem" 
         name="firstInpElem" 
         placeholder="firstInpElem"&gt;
  </code></pre>
  
  <p>This is working as expected (Chrome).</p>
  
  <p>Then the form continuous with a selection between two options controlled by an <code>&lt;input type="radio"&gt;</code>. </p>
  
  <p>Once a selection is made an according  element is shown and then should get the <code>autofocus</code>.</p>
  
  <p>But that is not happening and I don't understand the reason for it.</p>
  
  <p>Prepared a <a href="https://angular-shift-autofocus.stackblitz.io/" rel="nofollow noreferrer">stackblitz with a working example</a> but mainly below is the markup which won't work as expected</p>
  
  <pre><code>&lt;h1&gt;Forms example&lt;/h1&gt;
  
  &lt;form&gt;
  
    &lt;pre&gt;Condition to focus "firstInpElem" is {{selection===1|json}}&lt;/pre&gt;
  
    &lt;p&gt;This input element is autofocussed on page load&lt;/p&gt;
  
    &lt;p&gt;
      &lt;input [attr.autofocus]="selection===-1"
             [(ngModel)]="myForm.firstInpElem" 
             name="firstInpElem" 
             placeholder="firstInpElem"&gt;
    &lt;/p&gt;
  
    &lt;p&gt;
      Provide one of both information:&lt;br&gt;
  
      &lt;label&gt;
        &lt;input [(ngModel)]="selection" 
               name="radioInpElem"
               type="radio"
               [value]="1"&gt; 
               Option 1
      &lt;/label&gt;
      &lt;br&gt;
  
      &lt;label&gt;
        &lt;input [(ngModel)]="selection" 
               name="radioInpElem"
               type="radio"
               [value]="2"&gt;
               Option 2
      &lt;/label&gt;
  
    &lt;/p&gt;
  
    &lt;pre&gt;Condition to focus "secondInpElem" is {{selection===1|json}}&lt;/pre&gt;
    &lt;pre&gt;Condition to focus "thirdInpElem" is {{selection===2|json}}&lt;/pre&gt;
    &lt;p&gt;
  
  
    &lt;input *ngIf="selection===1"
          [attr.autofocus]="selection===1"
          [(ngModel)]="myForm.secondInpElem"
          name="secondInpElem"
          placeholder="secondInpElem"&gt;
  
  
  
    &lt;input *ngIf="selection===2"
            [attr.autofocus]="selection===2"
            [(ngModel)]="myForm.thirdInpElem"
            name="thirdInpElem"
            placeholder="thirdInpElem"&gt;
    &lt;/p&gt;
  &lt;/form&gt;
  
  
  &lt;pre&gt;{{myForm|json}}&lt;/pre&gt;
  </code></pre>