title: Directive @Input variable not getting update when component update the value
body: <p>I am trying to dynamically validate the custom-text-input based on service call result. If its true means jumpyId is available to use otherwise show error. My issue right now is when I update this.isAvailable from fromEvent its not reflecting the value in custom directive.
  I am expecting if api call return <code>true</code>, then directive should receive <code>true</code> otherwise <code>false</code>.</p>
  
  <p><strong>AvailableDirective.ts</strong></p>
  
  <pre><code>import { Directive, forwardRef, Input } from '@angular/core';
  import { Validator, AbstractControl, NG_VALIDATORS } from '@angular/forms';
  @Directive({
    selector: 'custom-text-input[vendorAvailable][formControlName],custom-text-input[vendorAvailable][formControl],custom-text-input[vendorAvailable][ngModel]',
    providers: [
      { provide: NG_VALIDATORS, useExisting: AvailabilityDirective, multi: true }
    ]
  })
  export class AvailabilityDirective implements Validator {
  
    @Input('available') available: boolean;
    validate(c: AbstractControl): { [key: string]: any } {
      console.log("valid", this.available);
      if (!this.available) {
        return {
          available: false
        };
      }
      return null;
    }
  }
  </code></pre>
  
  <p><strong>EventObservable:</strong></p>
  
  <pre><code>fromEvent(this.custom.nativeElement, 'keyup').pipe(
        map((event: any) =&gt; {
          return event.target.value;
        })
        , debounceTime(1000)
        , distinctUntilChanged()
      ).subscribe((text: string) =&gt; {
        this.myService.isAvailable(text).subscribe((res) =&gt; {
          console.log(res);
          if (res) {
            this.isAvailable = true;
          } else {
            this.isAvailable = false;
          }
        }, (err) =&gt; {
          console.log(err);
        });
      });
  </code></pre>
  
  <p><strong>template:</strong></p>
  
  <pre><code>&lt;custom-text-input *ngIf="drawer"
                                             label="JumpyId"
                                             [(ngModel)]="jumpyId"
                                             id="jumpyId"
                                             name="jumpyId"
                                             required
                                             [available]="isAvailable"
                                             #custom&gt;
                          &lt;/custom-text-input&gt;
  </code></pre>