title: Angular 2 - Access/get the input element inside an *ngFor and ngModel
body: <pre><code>&lt;ion-card *ngFor='#product of products | mapToIterable:"key":true'&gt;
      &lt;ion-list&gt;
          &lt;ion-item&gt;
              &lt;ion-label stacked&gt;Account No. / Phone No.&lt;/ion-label&gt;
              &lt;ion-input type="text" [(ngModel)]="product.msisdn"&gt;&lt;/ion-input&gt;
          &lt;/ion-item&gt;
          &lt;ion-item&gt;
              &lt;ion-label stacked&gt;Amount&lt;/ion-label&gt;
              &lt;ion-input type="text" (keypress)="isNumberKey($event)" [(ngModel)]="product.amount"&gt;&lt;/ion-input&gt;
          &lt;/ion-item&gt;
      &lt;/ion-list&gt;
  &lt;/ion-card&gt;
  </code></pre>
  
  <p>Referring to the html above, how do I get the reference of ion-input so that I can <code>setFocus()</code> on it after validation fails. I've already came out with the code below to validate each inputs.</p>
  
  <pre><code>for (var product of &lt;any&gt;this.products) {
      if (product.service_type_id == 2 &amp;&amp; !product.msisdn) {
          alert('something');
          //Get the element and set focus here.
      }
  }
  </code></pre>
  
  <p>Is this a good approach? Is there a better way of handling this in Angular 2?</p>