<p dir="auto">When a ngModel is attached to a HTML5 color input the resulting variable seems to lag one check behind. meaning if you listen for the input to be changed and then log the value the first ngDoCheck or ngAfterContentChecked returns the previous value of the color not the current value.<br>
A example of this is this code</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="(function(app){
    app.testing=ng.core.Component({
        selector:&quot;testing&quot;,
        template:&quot;&lt;input type='color' [(ngModel)]='value' (change)='changeupd()'/&gt;&quot;
    }).Class({
        constructor:[function(){
            this.value=&quot;#ffffff&quot;;
            this.changed=false;
            this.changeupd=function(){
                this.changed=true;
            };
        }],
        ngAfterContentChecked:function(){
            if(this.changed){
                console.log(this.value);
                this.changed=false;
            }
        },
    });
})(window.app||(window.app={}));"><pre class="notranslate"><code class="notranslate">(function(app){
    app.testing=ng.core.Component({
        selector:"testing",
        template:"&lt;input type='color' [(ngModel)]='value' (change)='changeupd()'/&gt;"
    }).Class({
        constructor:[function(){
            this.value="#ffffff";
            this.changed=false;
            this.changeupd=function(){
                this.changed=true;
            };
        }],
        ngAfterContentChecked:function(){
            if(this.changed){
                console.log(this.value);
                this.changed=false;
            }
        },
    });
})(window.app||(window.app={}));
</code></pre></div>
<p dir="auto">the result of this code is <code class="notranslate">#ffffff<span class="ml-1 d-inline-block border circle color-border-subtle" style="background-color: #ffffff; height: 8px; width: 8px;"></span></code> for the first console.log and then whatever the previous color was for all subsequent changes</p>
<p dir="auto">this creates a problem for any programs that run specific functions only after specific inputs are changed. i have not seen that problem with any other type of input except the html5 color</p>
<p dir="auto">Environment</p>
<ul dir="auto">
<li>Angular version: 2.0.0-beta.7 and 2.0.0-beta.8</li>
<li>Browser: Chrome 49.0.2623.75 m</li>
<li>Language: ES5</li>
</ul>
<p dir="auto"><strong>I'm submitting a ...</strong>  (check one with "x")</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question"><pre class="notranslate"><code class="notranslate">[x] bug report =&gt; search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request =&gt; Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
</code></pre></div>
<p dir="auto"><strong>Current behavior</strong><br>
Two way data binding is not working after element  uses jQuery plugin</p>

<p dir="auto"><strong>Expected behavior</strong><br>
It should work</p>

<p dir="auto"><strong>Minimal reproduction of the problem with instructions</strong><br>
I have posted my scenario on StackOverflow<br>
<a href="http://stackoverflow.com/questions/42973549/two-way-binding-not-working-in-angular-2" rel="nofollow">http://stackoverflow.com/questions/42973549/two-way-binding-not-working-in-angular-2</a></p>
<p dir="auto"><strong>What is the motivation / use case for changing the behavior?</strong></p>
<p dir="auto"><strong>Please tell us about your environment:</strong><br>
Windows 10, Visual Studio 2017 Community Edition, NPM, IIS</p>

<ul dir="auto">
<li>
<p dir="auto"><strong>Angular version:</strong> 2.0.X<br>
Getting 2.4.9 on browser ng-version attribute.<br>
In package json:<br>
"@angular/core": "~2.4.0"</p>
</li>
<li>
<p dir="auto"><strong>Browser:</strong> [all | Chrome XX | Firefox XX  ]</p>
</li>
</ul>

<ul dir="auto">
<li>
<p dir="auto"><strong>Language:</strong> [all | TypeScript 2.2.1 | ES6/7 | ES5]</p>
</li>
<li>
<p dir="auto"><strong>Node (for AoT issues):</strong> <code class="notranslate">node --version</code> =   7.0.0</p>
</li>
</ul>