title: Angular 12 - two-way binding gives error: The property and event halves of the two-way binding 'prop_name' are not bound to the same target
body: <p>Migrated from Angular 11 to Angular 12 and this issue pops out:</p>
  <p>&quot;<strong>Error:</strong> The property and event halves of the two-way binding 'value' are not bound to the same target.&quot;</p>
  <p>Parent Page Component:</p>
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-parent',
    template: `
      &lt;app-child [(value)]=&quot;counterValue&quot;&gt;&lt;/app-child&gt;
    `,
    styles: []
  })
  export class ParentComponent {
    counterValue = 0;
  }
  </code></pre>
  <p>Child Component:</p>
  <pre><code>import { Component, OnInit, EventEmitter, Input, Output } from '@angular/core';
  
  @Component({
    selector: 'app-child',
    template: `
      {{ value }}
    `,
    styles: []
  })
  export class ChildComponent {
    @Input() value = 0;
    @Output() incrementValue = new EventEmitter&lt;number&gt;();
  
    increase(): void {
      this.value++;
      this.incrementValue.emit(this.value);
    }
  }
  </code></pre>
  <p>Here es a <a href="https://stackblitz.com/edit/angular-webcontainer-template-dekvlh?file=README.md" rel="nofollow noreferrer">stackblitz</a> code for you to test it your self:</p>
  <p>Is this a bug?
  or am I missing something?</p>