Nullish coalescing operator cannot be used in two-way binding

Bug Report

Affected Package

Is this a regression?

No, this is a new feature.

Description

Nullish coalescing operator support that was recently added in Angular 12 breaks on compilation when used inside sandwich style syntax [(ngModel)]

Minimal Reproduction

https://stackblitz.com/edit/angular-ivy-phyfc4?file=src/app/app.component.ts

<app-test-component [(value)]="test ?? 0"></app-test-component>

Exception or Error

error NG5002: Parser Error: Unexpected token '=' at column 10 in [test ?? 0=$event] 

Your Environment

Angular Version:

Angular CLI: 12.0.3
Node: 16.3.0
Package Manager: npm 7.15.1
OS: win32 x64

[petebacondarwin]

We discussed this feature request today. While it is true that we could create some additional logic that enabled two-way binding to handle this scenario, it would add a new rules to our expression syntax that would move it away from how JavaScript works. We are actually trying to move in the opposite direction - to make the expression language closer to vanilla JavaScript.

Currently the rule is simple and aligned with JavaScript: the “banana-in-a-box” syntax [(prop)]="expression" gets “desugared” to a pair of expressions, the input [prop]="expression" and the output (propChange)="expression=$event".

It is clear when desugared that the output expression requires the expression to be a “assignable”. In JavaScript, nullish coalescing expressions are not assignable (e.g. value ?? 0 = $event) along with a number of other scenarios such as optional chaining (value?.prop = $event), ternary ((condition ? value1 : value2) = $event), function calls (foo(value) = $event) and so on.

Therefore we don’t intend to implement this feature in Angular.

One way to workaround this limitation (both in JavaScript and the Angular expression syntax) is to use getters and setters. For example, rather than putting the nullish coalescing in the template you put it in the getter for a property:

class MyComponent {
  private _value: number|undefined;
  get value(): number { return this._value ?? 42; }
  set value(v: number): number { this._value = v; }
}

The the value property can be referenced in a two-way binding in the component’s template:

<input [(ngModel)]="value">

[dario-piotrowicz]

I may be wrong but to me this sort of things seem to go against what the two way data binding is about, if you assign something dynamic and not a field of your component then the semantic of the operation gets quite unclear, doesn’t it?

On a similar note I just wanted to also point out that the ternary operator has a similar issue with the two way data binding ( as you can see here for example: https://medium.com/programming-beasts/ternary-operator-in-angular-two-way-binding-1da312916779 )