"Only numbers" directive for Angular

only-numbers.directive.ts

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

@Directive({
  selector: '[appOnlyNumbers]',
})
export class OnlyNumbersDirective {
  constructor(private element: ElementRef) {}

  /**
   * Stops the user from typing non-numerical
   * characters in the input.
   */
  @HostListener('keydown', ['$event'])
  handleKeyDown(e: KeyboardEvent) {
    if (this.isNavigationKeyOrSpecialCommand(e)) {
      return;
    }

    if (e.key === ' ' || isNaN(Number(e.key))) {
      e.preventDefault();
    }
  }

  /**
   * This additional handler is needed for some edge cases involving the Dead key.
   */
  @HostListener('input', ['$event'])
  handleInput(event: InputEvent) {
    const target = event.target as HTMLInputElement;
    target.value = this.filterNumbers(this.getValue());
  }

  /**
   * Removes non-numerical characters
   * from the content the user pastes in the input.
   */
  @HostListener('paste', ['$event'])
  handlePaste(event: ClipboardEvent) {
    event.preventDefault();

    const rawText = event.clipboardData.getData('text/plain');
    const parsedText = this.filterNumbers(rawText);

    this.setValue(parsedText);
  }

  private filterNumbers(value: string) {
    return value.replace(/\D/g, '');
  }

  private isNavigationKeyOrSpecialCommand(e: KeyboardEvent) {
    const navigationKeys = [
      'Backspace',
      'Delete',
      'Tab',
      'Escape',
      'Enter',
      'Home',
      'End',
      'ArrowLeft',
      'ArrowRight',
      'Clear',
      'Copy',
      'Paste',
    ];

    if (navigationKeys.includes(e.key)) {
      return true;
    }

    const allowedCombinations: [string, keyof KeyboardEvent][] = [
      ['a', 'ctrlKey'], // CTRL + A
      ['c', 'ctrlKey'], // CTRL + C
      ['v', 'ctrlKey'], // CTRL + V
      ['x', 'ctrlKey'], // CTRL + X
      ['a', 'metaKey'], // CMD + A
      ['c', 'metaKey'], // CMD + C
      ['v', 'metaKey'], // CMD + V
      ['x', 'metaKey'], // CMD + X
    ];

    return allowedCombinations.some(
      ([key, flag]) => e.key === key && e[flag] === true
    );
  }

  private setValue(value: string) {
    this.element.nativeElement.value = value;
  }

  private getValue() {
    return this.element.nativeElement.value;
  }
}

Based on this article by Changhui Xu

StackBlitz