numbers-only.directive.ts

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

@Directive({
  selector: '[appNumbersOnly]'
})
export class NumbersOnlyDirective {
  @Input() fieldMaxLength: number;
  constructor(private _el: ElementRef) { }

  @HostListener('keypress', ['$event']) onkeypress(event) {
    const initalValue = this._el.nativeElement.value;
    if (this.fieldMaxLength) {
      if ((initalValue.length + 1)  > this.fieldMaxLength) {
        event.preventDefault();
      }
    }
    if (event.code === 'KeyE' || event.code === 'Period') {
      event.preventDefault();
    }    
  }
}