How to handle a auto tab in angular4

Question

I need to move the next text box after typing in text from first text box. It has to auto move after typing text in first tab to next tab.

<div class="autotabbed-container">
  <div id="example1" class="autotabbed">
    <h3>Bank sort code: XX-XX-XX</h3>
    <input type="text" maxlength="2" size="2" />
    -
    <input type="text" maxlength="2" size="2" />
    -
    <input type="text" maxlength="2" size="2" />
  </div>
</div>

When I type the text in first text box the cursor need to move next text box. Please help how to achieve this in angular 4.

Same code is not working if I want apply in ngFor. In below code if I want to display text box based on ngFor loop. In first td I will display the password text boxes and next td I will display only star. In this case how we can dynamically apply #input. I need to point only first td items not next td items. So in this case how we can achieve auto focus.

<tr>
  <ng-container *ngFor="let i of dynamicArr, let x = index">
    <td *ngIf="i !== '*'">
      <input type="password" #input1 formControlName="dyna{{i}}" id="dyna{{i}}" (input) = "onInputEntry($event, input2)" required maxlength="1" />
    </td>
    <td *ngIf=" i === '*' ">
      <img class="flotado_right" id="starimage" src="starimage.jpg" class="dot-image">        
    </td>
  </ng-container>
</tr>

I am building dynamic array like below and dynamic text is have values like 2 5 and 7. Inthis case dynamicArr[2] = 1, dynamicArr[5] = 2 ,dynamicArr[7] = 3 so other values of values of dynamicArr is *

for (let i = 0; i < 10; i++) {
  if (((i + 1) === this.dynamictext[0])) {
    this.dynamicArr[i] = '1';
  } else if (((i + 1) === this.dynamictext[1])) {
    this.dynamicArr[i] = '2';
  } else if (((i + 1) === this.dynamictext[2])) {
    this.dynamicArr[i] = '3';
  } else {
    this.dynamicArr[i] = '*';
  }
}

Answer 1

If you want re-usable code try with a custom directive.

Directive:

import {Directive, HostListener, Input} from '@angular/core'

@Directive({
  selector: '[appAutoTab]'
})
export class AutoTabDirective {
  @Input('appAutoTab') appAutoTab

  @HostListener('input', ['$event.target']) onInput(input) {
    const length = input.value.length
    const maxLength = input.attributes.maxlength.value
    if (length >= maxLength) {
      this.appAutoTab.focus()
    }
  }
}

(remember to import the directive in the app.module)

@NgModule({
  declarations: [
   AutoTabDirective
  ]})

HTML

<input #input1 type="text" maxlength="2" [appAutoTab]="input2"/>
<input #input2 type="text" maxlength="2"/>

Answer 2

You could use the (input) event and template reference variables (#var) to determine if another element should be selected.

<input #input1 type="text" maxlength="2" size="2" (input)="onInputEntry($event, input2)" />
-
<input #input2 type="text" maxlength="2" size="2" />

---

// component 
onInputEntry(event, nextInput) {
  let input = event.target;
  let length = input.value.length;
  let maxLength = input.attributes.maxlength.value;

  if (length >= maxLength) {
    nextInput.focus();
  }
}