@HostListener('keydown', ['$event', '$event.keyCode'])

  onKeyDown($event: KeyboardEvent, keyCode) {

    if(keyCode !== TAB) {

      $event.preventDefault();

    }

    // get value for the key

    const val = String.fromCharCode(keyCode);

    // get position

    const cursorPos = this.input.selectionStart;

    switch(keyCode) {

      case LEFT_ARROW:

        this.handleLeftArrow(cursorPos);

        return;

      case RIGHT_ARROW:

        this.handleRightArrow(cursorPos);

        return;

    }

    overWriteCharAtPosition(this.input, val, cursorPos);

    this.handleRightArrow(cursorPos);

  }

  handleRightArrow(cursorPos) {

    const valueBeforeCursor = this.input.value.slice(cursorPos + );

    const nextPos = findIndex(valueBeforeCursor, (char) => !includes(SPECIAL_CHARACTERS, char));

    if(nextPos > -) {

      const newNextPos = cursorPos + nextPos + ;

      this.input.setSelectionRange(newNextPos, newNextPos);

    }

  }

  handleLeftArrow(cursorPos) {

    const valueAfterCursor = this.input.value.slice(, cursorPos);

    const previousPos = findLastIndex(valueAfterCursor, (char) => !includes(SPECIAL_CHARACTERS, char));

    if(previousPos > -) {

      this.input.setSelectionRange(previousPos, previousPos);

    }

  }