Angular enable tabulator on input field

enable-tab.directive.ts

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

@Directive({
  selector: '[enableTab]'
})
export class EnableTabDirective {

  constructor(private elementRef: ElementRef) {
  }

  @HostListener('keydown.tab', [ '$event' ])
  onTabKeyDown(event) {
    event.preventDefault();

    const value = this.elementRef.nativeElement.value;
    const start = this.elementRef.nativeElement.selectionStart;
    const end = this.elementRef.nativeElement.selectionEnd;

    this.elementRef.nativeElement.value = value.substring(0, start) + '\t' + value.substring(end);
    this.elementRef.nativeElement.selectionStart = start + 1;
    this.elementRef.nativeElement.selectionEnd = this.elementRef.nativeElement.selectionStart;
    event.preventDefault();

    const val = this.elementRef.nativeElement.value;
    const start = this.elementRef.nativeElement.selectionStart;
    const end = this.elementRef.nativeElement.selectionEnd;

    this.elementRef.nativeElement.value = val.substring(0, start) + '\t' + val.substring(end);
    this.elementRef.nativeElement.selectionStart = this.elementRef.nativeElement.selectionEnd = start + 1;

    const evt = new Event('input', {bubbles: true, cancelable: false});
    this.elementRef.nativeElement.dispatchEvent(evt);
  }
}