angular 9 – async best practises?

After upgrading from 8 to 9 async logic in html doesn’t work anymore.

like this

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

Out of this issue
and on the Ivy guide

It throws now an errorr if you use it.

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

Im of the opinion that this is not an antipattern, cause you can easily handle Change detection with it.

My question now :

What is the best practice(elegant way) to replace this kind of code to remove the error?

I know there is the possibility to use promise instead but is it really the best way?:


this.applicationsList = await this.applicationApi.getList().toPromise(); 


<div id="app">
  <app-search-filter [(applicationsList)]="applicationsList"></app-search-filter>


Here is a Stackblitz with the error if you see in the dev console :

enter image description here

Source: New feed
Source Url angular 9 – async best practises?