luisfarfan · February 8, 2019 16:48 · Apr 12, 2018 · Apr 12, 2018 · Apr 12, 2018 · Apr 12, 2018
diff --git a/only-number.directive.md b/only-number.directive.md
@@ -1,4 +1,4 @@
-# Angular 5 
+# Angular 5 - Only Number Input, Only Number Decimal
 
 ### Allow Only Numbers [0-9]
 ```html

diff --git a/only-number.directive.rb → only-number.directive.md b/only-number.directive.rb → only-number.directive.md
diff --git a/only-number.directive.rm → only-number.directive.rb b/only-number.directive.rm → only-number.directive.rb
diff --git a/only-number.directive.js → only-number.directive.rm b/only-number.directive.js → only-number.directive.rm
diff --git a/only-number.directive.ts → only-number.directive.js b/only-number.directive.ts → only-number.directive.js
diff --git a/only-number.directive.ts b/only-number.directive.ts
@@ -0,0 +1,52 @@
+# Angular 5 
+
+### Allow Only Numbers [0-9]
+```html
+<input numeric numericType="number" type="text">
+```
+
+### Allow Numbers & Decimals [0-9] [also only one dot]
+```html
+<input numeric numericType="decimal" type="text">
+```
+
+```javascript
+import {Directive, ElementRef, HostListener, Input} from '@angular/core';
+
+@Directive({
+    selector: '[numeric]'
+})
+
+export class NumericDirective {
+
+    @Input('numericType') numericType: string; // number | decimal
+
+    private regex = {
+        number: new RegExp(/^\d+$/),
+        decimal: new RegExp(/^[0-9]+(\.[0-9]*){0,1}$/g)
+    };
+
+    private specialKeys = {
+        number: [ 'Backspace', 'Tab', 'End', 'Home', 'ArrowLeft', 'ArrowRight' ],
+        decimal: [ 'Backspace', 'Tab', 'End', 'Home', 'ArrowLeft', 'ArrowRight' ],
+    };
+
+    constructor(private el: ElementRef) {
+    }
+
+    @HostListener('keydown', [ '$event' ])
+    onKeyDown(event: KeyboardEvent) {
+
+        if (this.specialKeys[this.numericType].indexOf(event.key) !== -1) {
+            return;
+        }
+        // Do not use event.keycode this is deprecated.
+        // See: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
+        let current: string = this.el.nativeElement.value;
+        let next: string = current.concat(event.key);
+        if (next && !String(next).match(this.regex[this.numericType])) {
+            event.preventDefault();
+        }
+    }
+}
+```