title: how create my own directive for lowercase
body: <p>I want to create my own directive, but it does not work:</p>
  
  <p><strong>input-format.directive.ts</strong></p>
  
  <pre><code>import { Directive, HostListener, ElementRef,Input } from '@angular/core';
  
  @Directive({
    selector: '[appInputFormat]'
  }) 
  export class InputFormatDirective {
    @Input('format') format;
  
    constructor(private el: ElementRef) { }
  
    @HostListener('blur') onBlur(){
      let value:string = this.el.nativeElement.value;
  
      if(this.format=="lowercase"){
        this.el.nativeElement.value = value.toUpperCase();
      }else{
        this.el.nativeElement.value = value.toLowerCase();
      }
  
    }
  }
  </code></pre>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>[&lt;input type="text" appInputFormat \['format'\]="'lowercase'" &gt;][1]
  </code></pre>