Angular 2 ngModel in child component updates parent component property
<p>I made a simple UI which consist two components (parent and child).</p>

<p>What the UI does is that when I type some stuff in the input box of the Child component. The value will change using ngModel.</p>

<p>The child component works fine that way.</p>

<pre><code>// Child Component
@Component({
    selector: 'child',
    template: `
        &lt;p&gt;{{sharedVar}}&lt;/p&gt;
        &lt;input [(ngModel)]="sharedVar"&gt;
    `
})
export class ChildComponent {
    sharedVar: string;
}
</code></pre>

<p>Now I have a parent component which I intend to use the same value as Child Component.</p>

<p>I added the Child Component into the Parent template, and use dependency injection to call Child Component's <code>sharedVar</code>.</p>

<pre><code>// Parent Component
@Component({
    selector: 'parent',
    template: `
        &lt;h1&gt;{{sharedVar}}&lt;/h1&gt;
        &lt;child&gt;&lt;/child&gt;
    `,
    directives: [ChildComponent],
    providers: [ChildCompnent]
})
export class ParentComponent {
    sharedVar: string;
    constructor(child: ChildComponent) {
        this.sharedVar = child.sharedVar;
    }
}
</code></pre>

<p>The problem is as I'm typing in the input box, the value in <code>&lt;p&gt;</code> changes automatically while the value in parent component's <code>&lt;h1&gt;</code> do not change.</p>