title: Angular 4 template variable focus
body: <p>I have this cell template that shows the value of an Object into a span element, or, if the row is being editing, shows the value inside an input.</p>
  <pre><code>&lt;ng-template ngx-datatable-cell-template let-rowIndex=&quot;rowIndex&quot; let-row=&quot;row&quot; let-value=&quot;value&quot;&gt;
      &lt;span
          *ngIf=&quot;!editing[rowIndex]&quot;&gt;
          {{value}}
      &lt;/span&gt;
      &lt;input
          #myInput
          autofocus
          (blur)=&quot;setValue($event, value , row)&quot;
          *ngIf=&quot;editing[rowIndex]&quot;
          type=&quot;text&quot;
          [value]=&quot;value&quot;
      /&gt;
  &lt;/ng-template&gt;
  </code></pre>
  <p>When I click my edit button, I need to focus and select the text. No problem with that. I have</p>
  <pre><code>@ViewChild('myInput') myInput;
  </code></pre>
  <p>and</p>
  <pre><code>private focusInput(){       
      this.myInput.nativeElement.focus();
      this.myInput.nativeElement.select();
  }
  </code></pre>
  <p>The problem is if I need to edit &quot;simultaneously&quot; 2 rows, after clicking the 1st-row edit button, is selected and focused, but when I click the 2nd row's edit button, the 1st input gets the focus again.
  I think is angular finding the first #myinput element available and focusing them, because, if I click the row number 5 in the first place, it focuses correctly and when any of the previous rows are marked for edit, the behavior is fine.</p>
  <p>How can I make this work for each row even when other #myinput are present in the template?</p>