title: Add directive to validate an input, Angular2 and typescript
body: <p>I am working on an Angular2 with Typescript project. I am trying to make a validation directive so I can send the value from the Html tag with the type of the input and response with a boolean value.</p>
  
  <p>the directive I wrote is:</p>
  
  <pre><code>import { Directive, ElementRef, HostListener, Input, Output } from '@angular/core';
  
  @Directive({
      selector: '[validate]'
  })
  
  export class Validation{
      @Input('validate') validateType: string;
      @Input() validateValue: string;
  
      @Output() status:boolean;
      constructor(private el : ElementRef){
      }
  
      @HostListener('keyup') OnKeyUp(){
         if(this.validateType === "number")
          {
              var isNumeric = /^[-+]?(\d+|\d+\.\d*|\d*\.\d+)$/;
              this.status = isNumeric.test(this.validateValue);
          }
      }
  }
  </code></pre>
  
  <p>and I register it in the app.module.ts: </p>
  
  <pre><code>import { Validation}            from './validation-directive/validation.directive';
  .
  .
  .
  @NgModule({
  .
  .,
    declarations: [
       Validation
    ],
  })
  </code></pre>
  
  <p>and the html code is: </p>
  
  <pre><code>&lt;input #validateNumber [validate]="number" validationValue="validateNumber.value" /&gt;
  &lt;span&gt;result is: &lt;/span&gt;
  </code></pre>
  
  <p>I want the value to be passed from the input to the directive and the output would be shown up in the span. </p>
  
  <p>the code is not working and the directive is not working, although it does not give an error. why? what is wrong with my code? </p>
  
  <p>and how can I expose the output in the result span? </p>
  
  <p>thank you</p>