How to pass async variable in template (action) function?

Question

I need to pass async variable to the function. Something like this:

<div class="team" (click)="addToFavorite((match | async)?.id)">

And of course I have an error.

Parser Error: Cannot have a pipe in an action expression.

Maybe there is a way to transform async variable in JavaScript?

Answer 1

Another option for simple variables and without any observables is writing value of the variable into hidden input:

<div *ngIf="(match | async)?.id">
    <input  #myControl [value]="(match | async).id" type="hidden" />
    <div class="team" (click)="addToFavorite(myControl.value)">
</div>