[SOLVED] How to call a function received from async stream using Angular async pipe? Error: Cannot have a pipe in an action expression

How to call a function received from async stream using Angular async pipe? Error: Cannot have a pipe in an action expression

I would like to call a function received from a stream of data using Angular 9 async pipe.

The following code (onApprove)="(modalData$ | async).onApprove()" throws this error: Cannot have a pipe in an action expression

I couldn't find a solution online, only references to questions about ngModel (example)

<div class="confirm-modal-container">
  <div class="title">{{(modalData$ | async).title}}</div>
  <div class="body">{{(modalData$ | async).body}}</div>
    <app-action-buttons (onApprove)="(modalData$ | async).onApprove()" (onCancel)="(modalData$ | async).onCancel()" [cancelText]="currentStep === 0 ? 'Cancel' : 'Previous'" [approveText]="control[currentStep].actionBtnText"></app-action-buttons>
</div>

The data stream comes from Redux store

@select((state: IAppState) => state.ui.modal.modalData) readonly modalData$: Observable<any>;

Solution

You can extract out the response in an ng-container grouping element and use the reposne at all lower nested levels. This way you wouldn't even require to call async every single time.

<div class="confirm-modal-container">
    <ng-container *ngIf="modalData$ | async as modelData">
        <div class="title">{{modelData.title}}</div>
        <div class="body">{{modelData.body}}</div>
        <app-action-buttons (onApprove)="modelData.onApprove()" (onCancel)="modelData.onCancel()" [cancelText]="currentStep === 0 ? 'Cancel' : 'Previous'" [approveText]="control[currentStep].actionBtnText"></app-action-buttons>
    </ng-container>
</div>