kfmc_website/src/app/number-derictive.directive.ts

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

@Directive({
  selector: '[appNumberDerictive]'
})
export class NumberDerictiveDirective {


     private regex: RegExp = new RegExp(/^[0-9]+(\.[0-9]*){0,1}$/g);

     private specialKeys: Array<string> = [ 'Backspace', 'Tab', 'End', 'Home' ];
 
     constructor(private el: ElementRef) {
     }
 
     @HostListener('keydown', [ '$event' ])
     onKeyDown(event: KeyboardEvent) {
         // Allow Backspace, tab, end, and home keys
         if (this.specialKeys.indexOf(event.key) !== -1) {
             return;
         }
         let current: string = this.el.nativeElement.value;
         let next: string = current.concat(event.key);
         if (next && !String(next).match(this.regex) || next.length > 10) {
             event.preventDefault();
         }
     }

}