Angular 2 numeric input
<p>I'm trying to create an input that only allows for numbers to be typed in it, the problem is that <code>this.modelChange.next(value)</code> doesn't appear to be firing unless I actually type a number. </p>

<p>Because if I type a <code>0</code>, then add a letter <code>0a</code> the model stays at <code>0</code>, and if I then add another digit <code>0a0</code> then the model updates and so does the input value since then the model has become <code>00</code>. </p>

<p>How can I make sure that an updates happens every time you enter something?</p>

<p>Component:</p>

<pre><code>import {Component, Input, Output, EventEmitter} from 'angular2/core';

@Component({
  selector: 'form-number-input',
  templateUrl: './app/assets/scripts/modules/form-controls/form-number-input/form-number-input.component.html',
  styleUrls: ['./app/assets/scripts/modules/form-controls/form-number-input/form-number-input.component.css'],
  inputs: [
    'model',
    'alt',
    'placeholder',
    'name',
    'label'
  ],
  host: {
    '(input)': 'isNum($event.target.value)'
  }
})

export class FormNumberInputComponent {
  @Input() model: number;
  @Output() modelChange: EventEmitter = new EventEmitter();

  isNum(value) {

    value = value.replace(/[^0-9.-]/g, '');

    this.modelChange.next(value);
  }
}
</code></pre>

<p>Template:</p>

<pre><code>&lt;div&gt;
  &lt;label attr.for="{{name}}"&gt;{{label}}&lt;/label&gt;
  &lt;input [(ngModel)]="model" type="text" placeholder="{{placeholder}}" alt="{{alt}}" id="{{name}}" class="form-number-input"&gt;
&lt;/div&gt;
</code></pre>

<p>Usage:</p>

<pre><code>&lt;form-number-input [(model)]="myNumber" label="Number" placeholder="Write a number" alt="Number input"&gt;&lt;/form-number-input&gt;
</code></pre>

<p><strong>EDIT:</strong> I found a solution to the problem, although it feels wrong:</p>

<pre><code>isNum(value) {

  this.modelChange.next(value);

  value = value.replace(/[^0-9]/g, '');

  this.modelChange.next(value);
}
</code></pre>

<p>By calling the <code>modelChange</code> before AND after we manipulate the value both the input and the model gets updated, but WHY does this work?</p>