angular 9 / Ivy => async 'as' leads to error

🐞 bug report

Affected Package

https://github.com/mpalourdio/ng2

Is this a regression?

Yes, the previous version in which this bug was not present is angular8@latest.

Description

<div id="app" *ngIf="(applicationsList$ | async) as applicationsList">
    <app-search-filter [(applicationsList)]="applicationsList"></app-search-filter>
</div>

yarn start

Error : Property 'applicationsList' does not exist on type 'ChildComponent'. Did you mean 'applicationsList$'?

Disabling Ivy leads to

ERROR in Cannot assign value "$event" to template variable "applicationsList". Template variables are read-only.

🔬 Minimal Reproduction

• clone https://github.com/mpalourdio/ng2
• run ng update @angular/cli @angular/core --next
• yarn start

🔥 Exception or Error

 Property 'applicationsList' does not exist on type 'ChildComponent'. Did you mean 'applicationsList$'?

Disabling Ivy leads to

ERROR in Cannot assign value "$event" to template variable "applicationsList". Template variables are read-only.

🌍 Your Environment

Angular Version:

Angular CLI: 9.0.0-rc.6
Node: 12.13.0
OS: linux x64

Angular: 9.0.0-rc.6
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.0-rc.6
@angular-devkit/build-angular     0.900.0-rc.6
@angular-devkit/build-optimizer   0.900.0-rc.6
@angular-devkit/build-webpack     0.900.0-rc.6
@angular-devkit/core              9.0.0-rc.6
@angular-devkit/schematics        9.0.0-rc.6
@ngtools/webpack                  9.0.0-rc.6
@schematics/angular               9.0.0-rc.6
@schematics/update                0.900.0-rc.6
rxjs                              6.5.3
typescript                        3.6.4
webpack                           4.41.2

---

EDIT (by gkalpak)

Adding the conclusions from https://github.com/angular/angular/issues/34405#issuecomment-566134215 (after the discussion below) here for visibility:

The issue is that this breaking change is not (clearly) documented, so let’s keep this open to track that 😃

Action items:

• Figure out what the breaking change is exactly (incl. how template variables created via as are different from other template variables).
• Document that.

[Gztabo21]

hello in my case my mistake was because I had this like this:

<mat-option *ngFor="let terminal of terminals" [(value)]="terminal">{{terminal.Name}}</mat-option>

What I did to solve was to change the value as follows:

<mat-option *ngFor="let terminal of terminals" value="{{terminal}}">{{terminal.Name}}</mat-option>

hola en mi caso mi error era por que tenia esto asi :

<mat-option *ngFor="let terminal of terminals"  [(value)]="terminal">{{terminal.Name}}</mat-option>

lo que hice para solventar fue cambiar el value a la siguiente manera:

<mat-option *ngFor="let terminal of terminals"  value="{{terminal}}">{{terminal.Name}}</mat-option>

[JoostK]

The error in Ivy was incorrect, this has been resolved in #34339 (which just missed the rc.6 release).

Other than that: what @gkalpak said 😃