Keydown Method that Enables Tabbing in Textarea Elements

enable-tabing-method.html

<textarea
  (keydown)="enableTabbing($event)">
</textarea>

enable-tabing-method.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  enableTabbing(event: any): any {
    console.log(event);
    if (event.key == 'Tab') {
      event.preventDefault();
      const start = event.target.selectionStart;
      const end = event.target.selectionEnd;

      event.target.value =
        event.target.value.substring(0, start) +
        ' ' +
        ' ' +
        event.target.value.substring(end);
      event.target.selectionStart = event.target.selectionEnd = start + 1;
    }
  }
}