title: Angular 4 input[type='number'] prevent typing over min/max
body: <p>I am trying to make a <code>inputNumber</code> directive which will prevent typing (not highlighting the input when value is wrong, but even <strong>typing in</strong> wrong value): </p>
  
  <p>a) letters and symbols, restrict only to [0-9]
  b) respect <code>min</code> and <code>max</code> params
  c) be in relation with other such directives in the view via <code>greaterOrEqual</code> / <code>lessOrEqual</code> properties.</p>
  
  <p>This is my <code>input-number.directive.ts</code>:</p>
  
  <pre><code>import {Directive, HostListener, Input} from '@angular/core';
  
  @Directive({
      selector: '[inputNumber]'
  })
  export class InputNumberDirective {
  
      @Input() min: number = 0; // will be input
      @Input() max: number = 100; // will be input
  
      @Input() greaterOrEqual: number = 23; // will be input
      @Input() lessOrEqual: number = 77; // will be input
  
      @HostListener('keypress', ['$event']) sanitizeValue(event: KeyboardEvent): boolean {
  
          const targetVal: number = Number((&lt;HTMLInputElement&gt;event.target).value);
  
          if (event.charCode &gt;= 48 &amp;&amp; event.charCode &lt; 58) {
              if (this.min !== null &amp;&amp; targetVal &lt; this.min) {
                  return false;
              }
              if (this.max !== null &amp;&amp; targetVal &gt; this.max) {
                  return false;
              }
              if (this.greaterOrEqual !== null &amp;&amp; targetVal &lt; this.greaterOrEqual) {
                  return false;
              }
              return !(this.lessOrEqual !== null &amp;&amp; targetVal &gt; this.lessOrEqual);
          }
          return false;
      }
  }
  </code></pre>
  
  <p>This all works in terms of preventing typing letters/symbols, but when it comes to respecting numbers limiters user is still able to type them over and my purpose to prevent this.
  I found some SO threads (e.g. <a href="https://stackoverflow.com/questions/46325574/dont-allow-typing-numbers-between-max-and-min-value">Don't allow typing numbers between max and min value</a>) on this, but it didn't help me a lot.</p>