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

Question

Migrated from Angular 11 to Angular 12 and this issue pops out:

"Error: The property and event halves of the two-way binding 'value' are not bound to the same target."

Parent Page Component:

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-child [(value)]="counterValue"></app-child>
  `,
  styles: []
})
export class ParentComponent {
  counterValue = 0;
}

Child Component:

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<number>();

  increase(): void {
    this.value++;
    this.incrementValue.emit(this.value);
  }
}

Here es a stackblitz code for you to test it your self:

Is this a bug? or am I missing something?

the emitter should be called `valueChange` (property+Change) see the [docs](https://angular.io/guide/two-way-binding#how-two-way-binding-works). Your [forked stackblitz](https://stackblitz.com/edit/angular-webcontainer-template-c3awt5?file=src%2Fapp%2Fchild%2Fchild.component.ts) — Eliseo, Mar 15 '22 at 14:58
I had this problem with a third party js library and changed "strictTemplates": false in tsconfig. Clearly this is not a fix per se, but it got me going. — Darren Street, Jul 08 '22 at 09:49

score 2 · Answer 1 · edited Jun 21 '22 at 14:25

2

The Output Decorator should be valueChange instead of incrementValue.

According to Angular documentation for Two-way binding:

the inputDecorator @Input propertyName
the OutputDecorator @Output propertyNameChange

In your code you used @Input as value, so @Output should be valueChange.

edited Jun 21 '22 at 14:25

ahuemmer

1,653
9
22
29

answered Jun 19 '22 at 18:18

Harsha Vardhana Kalahasthi

21
3

score 1 · Answer 2 · answered Mar 15 '22 at 13:51

I just used a work-around to continue developing while this issue gets solved.

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-child [value]="counterValue" (incrementValue)="onChange($event)"></app-child>
  `,
  styles: []
})
export class ParentComponent {
  counterValue = 0;
  onChange(n:number) {
    this.counterValue = n;
  }
}

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

2 Answers2