Imagine that you have this piece of code, where userInfo$ is Observable and it value is not yet emitted.
<app-change-email [currentEmail]="(userInfo$ | async).user.email"></app-change-email>
The code works, but it will report error ExpressionChangedAfterItHasBeenCheckedError to the console (only in dev mode). That is because the component has received the value, but the value has changed later. Angular does not like it. I googled for solutions, but could not use them, or it would be too complicated in given setup.
Workaround is easy
<ng-template #loading>
<div id="loading"></div>
</ng-template>
<ng-container *ngIf="userInfo$ | async; let userInfoState; else loading">
<app-change-email [currentEmail]="userInfoState.user.email"></app-change-email>
</ng-container>