title: Angular 4 - How to get a pipe to trigger on a programmatic value change (no keyboard events)
body: <p>This is my first angualr project. I am updating an inputs value on an elements click. I would like to trigger the filtering pipe when this value is changed. The logic to trigger the pipe is in a directive. Is this possible?</p>
  
  <p><strong>Component</strong></p>
  
  <pre><code>&lt;input id="filter-careers" placeholder="type your title here" type="text" [(ngModel)]="term" value=""&gt;
  
   &lt;div class="vacancy {{vacancy.department}}" *ngFor="let vacancy of vacancies | filter:term"
         (click)="openModalContent(vacancy.description, vacancy.positionTitle, vacancy.department, vacancy.link)"&gt;
        &lt;p&gt;{{vacancy.positionTitle }}&lt;/p&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>Second component</strong></p>
  
  <pre><code>&lt;div class="department" *ngFor="let department of departments" appDepartmentsDirective [departmentName]="department.name" &gt;
  
        &lt;div class="icon" [ngStyle]="{background: 'url(' + '../../assets/' + department.link + '.png' + ') center center no-repeat'}"&gt;
          &lt;img src="../../assets/{{department.link}}.svg" /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>Directive</strong></p>
  
  <pre><code>import { Directive, HostListener, Input  } from '@angular/core';
  
  @Directive({
    selector: '[appDepartmentsDirective]'
  })
  
  export class DepartmentsDirectiveDirective {
  
    @Input() departmentName:string;
  
    constructor() { }
  
  
  
    @HostListener('click') click() {
      console.log('department name: ' + this.departmentName);
      if((&lt;HTMLInputElement&gt;document.getElementById('filter-careers'))){
        console.log('do something here to trigger the filtering');
  
        (&lt;HTMLInputElement&gt;document.getElementById('filter-careers')).value = this.departmentName;
        (&lt;HTMLInputElement&gt;document.getElementById('filter-careers')).focus();
  
      }
      else{
        console.log('do something else');
      }
  
    }
  
  }
  </code></pre>