open-next-field.directive.ts

@Directive({
    selector: '[openNextField]'
})
/**
 * @example
 * <form>
 *     <ion-list>
 *         <ion-item>
 *             <ion-label>Text field</ion-label>
 *             <ion-input [openNextField]="selectFieldRef"></ion-input>
 *         </ion-item>
 *         <ion-item>
 *             <ion-label>Select field</ion-label>
 *             <ion-select #selectFieldRef>
 *                 <ion-option>1</ion-option>
 *                 <ion-option>2</ion-option>
 *             </ion-select>
 *         </ion-item>
 *     </ion-list>
 * </form>
 */
export class OpenNextFieldDirective {
    @Input('openNextField')
    private nextFieldRef: Select | Datetime;

    private readonly tabKeyCode = 9;

    @HostListener('keyup', ['$event'])
    public handleNextKey(event) {
        if (event.keyCode === this.tabKeyCode && this.nextFieldRef != null) {
            this.nextFieldRef.open();
        }
    }
}