- Diretiva para que campo aceite apenas números;

only-number.directive.ts

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

// Source: https://codeburst.io/digit-only-directive-in-angular-3db8a94d80c3
@Directive({
  selector: '[onlyNumber]'
})
export class OnlyNumberDirective {
  private navigationKeys = [
    'Backspace',
    'Delete',
    'Tab',
    'Escape',
    'Enter',
    'Home',
    'End',
    'ArrowLeft',
    'ArrowRight',
    'Clear',
    'Copy',
    'Paste'
  ];

  inputElement: HTMLElement
  constructor(public elementRef: ElementRef) {
    this.inputElement = elementRef.nativeElement
  }

  @HostListener('keydown', ['$event'])
  onKeyDown(e: KeyboardEvent) {
    if (
      this.navigationKeys.indexOf(e.key) > -1 || // Allow: navigation keys: backspace, delete, arrows etc.
      (e.key === 'a' && e.ctrlKey === true) || // Allow: Ctrl+A
      (e.key === 'c' && e.ctrlKey === true) || // Allow: Ctrl+C
      (e.key === 'v' && e.ctrlKey === true) || // Allow: Ctrl+V
      (e.key === 'x' && e.ctrlKey === true) || // Allow: Ctrl+X
      (e.key === 'a' && e.metaKey === true) || // Allow: Cmd+A (Mac)
      (e.key === 'c' && e.metaKey === true) || // Allow: Cmd+C (Mac)
      (e.key === 'v' && e.metaKey === true) || // Allow: Cmd+V (Mac)
      (e.key === 'x' && e.metaKey === true) // Allow: Cmd+X (Mac)
    ) {      
      return;
    }

    if (( e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) &&
        ( e.keyCode < 96 || e.keyCode > 105 ) )
    {
        e.preventDefault()
    }
  }

  @HostListener('paste', ['$event'])
  onPaste(event: ClipboardEvent) {
    event.preventDefault()
    const pastedInput: string = event.clipboardData
      .getData('text/plain')
      .replace(/\D/g, '')
    document.execCommand('insertText', false, pastedInput)
  }
  
  onDrop(event: DragEvent) {
    event.preventDefault()
    const textData = event.dataTransfer.getData('text').replace(/\D/g, '')
    this.inputElement.focus()
    document.execCommand('insertText', false, textData)
  }
}