Custom tab to next control - quan1997ap/angular-app-note GitHub Wiki

Directive

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

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

  @HostListener('keydown', ['$event']) onKeyDown(e) {
    if( e.key === "Tab" &&& e.keyCode === 9){
       setTimeout( () => {
         this.nextControl.focus();
       }, 100)
    }
  }
}

Module

@NgModule({
  declarations: [
   AutoTabDirective
  ]})

Use - component

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