Angular Numeric Directive Validation

input-number.ts

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

@Directive({
    selector: '[inputNumber]'
})
export class InputNumberDirective {
    constructor(private element: ElementRef) {}

    @HostListener('keypress', ['$event'])
    public onInput(event) {
        const pattern = /[0-9.]/;
        const inputChar = String.fromCharCode(event.charCode);
        const isDeleting = event.charCode === 0;
        const hasDot = this.element.nativeElement.value.indexOf('.') !== -1;

        if ((!isDeleting && !pattern.test(inputChar)) || (hasDot && inputChar === '.')) {
            // invalid character, prevent input
            event.preventDefault();
        }

    }
}