title: Directive now causes "Can't bind to 'blur' since it isn't a known property of 'input'."
body: <p>In our angular 4.3.2 project, we have a directive that <code>.trim()</code>s various types of inputs. In its entirety:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Directive, ElementRef, forwardRef, HostBinding, Renderer2 } from "@angular/core";
  import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
  
  const TRIM_VALUE_ACCESSOR = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() =&gt; TrimDirective),
    multi: true
  };
  
  @Directive({
    selector: 'input[type=text]:not(#autocomplete-keyboard-access):not([disabled]):not(.dropdown-box), input[type=email]',
    providers: [TRIM_VALUE_ACCESSOR]
  })
  
  export class TrimDirective implements ControlValueAccessor {
    onChange = (_: any) =&gt; {};
    onTouched = () =&gt; {};
  
    constructor(private renderer: Renderer2, private elementRef: ElementRef) {}
  
    @HostBinding('blur')
    blur() {
      this.onTouched();
    }
  
    @HostBinding('change')
    trim(value: any): void {
      if (value) {
        value = value.toString().trim();
      }
  
      this.writeValue(value);
      this.onChange(value);
    }
  
    registerOnChange(fn: (value: any) =&gt; any): void { this.onChange = fn; }
  
    registerOnTouched(fn: () =&gt; any): void { this.onTouched = fn; }
  
    writeValue(value: any): void {
      if (typeof value !== 'undefined') {
        this.renderer.setProperty(this.elementRef.nativeElement, 'value', value);
      }
    }
  }
  </code></pre>
  
  <p>It is imported into the relevant <code>@NgModule</code>. Similarly, <code>FormsModule</code> exists in the <code>NgModule.imports[]</code>.</p>
  
  <p>In templates, I now have the following error at template compile time (be it in the browser or AoT):</p>
  
  <blockquote>
    <p>Can't bind to 'blur' since it isn't a known property of 'input'.</p>
  </blockquote>
  
  <p>The error is thrown wherever the directive applies.</p>
  
  <p>A template in question (which dates back to <em>beta-6</em> days and has not been refactored since):</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;input #userEmail
         name="email"
         type="email"
         class="modal-fixed-width-input" maxLength="128"
         required
         placeholder="email@domain.com"
         pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"
         [ngClass]="{'bg-yellow red' : !emailFocus &amp;&amp; emailErrorMessage}"
         [(ngModel)]="userMail"
         (ngModelChange)="fieldsChange=true"
         ngControl="email"
         #email="ngModel"
         (focus)="emailFocus=true"
         (blur)="emailFocus=false; userEmail.value = userEmail.value.trim(); emailErrorMessage = isEntryValid(userEmail.value, 'Email');"&gt;
  </code></pre>
  
  <p>Before transitioning to Angular CLI, this directive worked. Since <code>FormsModule</code> is correctly imported (which is usually the explanation for this error) I'm at a loss to explain why this directive's event listener bindings cause this compilation error.</p>