Angular 2 doesn't update input value modified by third-party libraries
<p>I have a simple form with its input field associated to a directive:</p>

<pre><code>&lt;form id="scrollable-dropdown-menu"&gt;
  &lt;input class="input-field" name="value" [someDirective] type="text"  [(ngModel)]="value" #query="ngModel" /&gt;
  &lt;button (click)="onPost(query.value)" type="submit"&gt;Search&lt;/button&gt;
&lt;/form&gt;
</code></pre>

<p>The directive changes the input field through the use of a third party library. In my particular case, this is an autocomplete/typeahead Jquery plugin. This plugin provides options to the user and after selecting an option, it changes the value of the input field. </p>

<p>However, Angular doesn't update its property <code>query.value</code> and therefore, passes the old value to the <code>onPost</code> method.</p>

<p>The directive looks something like this:</p>

<pre><code>@Directive({
    selector: '[someDirective]',
})
export class MyDirective  {
     constructor(private elRef: ElementRef, private renderer: Renderer) {
         // this changes the value of the field if the user selects an option
         $('.input-field').plugin(); 
     }

}
</code></pre>

<p>I was suggested to use UpdateValue, but I can't see how to use it inside a directive. That led me to look at @ViewChild, but it doesn't seem to work in directives, although I could be mistaken.</p>

<p>I also tried to force an update by injecting <code>ChangeDetectorRef</code>, but I didn't see any difference. This is what I did:</p>

<p>my.directive.ts</p>

<pre><code>import {ChangeDetectorRef} from '@angular/core';
@Directive({
    selector: '[someDirective]',
})
export class MyDirective  {
    constructor(private elRef: ElementRef, private renderer: Renderer, private detectorRef: ChangeDetectorRef) {
       $('.input-field').plugin(); 

       $('.input-field').my-plugin(':selected', ()=&gt;{ 
          // do something... 
          this.detectorRef.detectChanges();
       })
    }



}
</code></pre>

<p>AfterSelection is triggered when the user selects an option from the autocomplete plugin. For the plugin, it looks a bit different because it binds to some event, but I think this illustrates the idea.</p>

<p>I would appreciate any suggestions.</p>

<p><strong>UPDATE</strong>:</p>

<p><a href="http://plnkr.co/edit/1XLMWuQrxwDdgI2Fnwaf?p=preview" rel="nofollow">This</a> is a plnkr to show the main issue using the typeahead.js library. If you write a letter in the input field, it will show you some options. Select one of them and the value of the input field will change accordingly. However, when you submit the form (clicking on the input field or pressing enter), an alert will show that the value that was passed to the onPost function was the old value of the field and not the autocompleted value you selected.</p>