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> </div>

Out of this issue https://github.com/angular/angular/issues/34405 and on the Ivy guide https://next.angular.io/guide/ivy-compatibility.

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?:

.ts

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

.html

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

EDIT :

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

https://stackblitz.com/edit/angular-ivy-taatzh