inputNumberValidator.ts

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

@Directive({ selector: '[InputValidator]' })

export class InputValidatorDirective implements OnInit {
  el: any;
  constructor(private elementRef: ElementRef) {
      this.el = this.elementRef.nativeElement;
  }

  ngOnInit() {}

  @HostListener('keydown', ['$event.target.value']) keydown($event) {
    if ((event['keyCode'] >= 48 && event['keyCode'] <= 57) // numbers range
    || (event['keyCode'] >= 96 && event['keyCode'] <= 105) // numbad numbers range
    || (event['keyCode'] >= 37 && event['keyCode'] <= 40) // arrow keys range
    || event['keyCode'] === 46 // delete
    || event['keyCode'] === 8 // backspace
    || event['keyCode'] === 190 // dot
    || event['keyCode'] === 9 // Tab key
    || event['keyCode'] === 110) { // decimal point
      // console.log('the value is entering.')
    } else {
      event.preventDefault();
      return false;
    }
  }
}