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

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

Here is how I solved it :
<div *ngIf="(match | async) as match" class="team" (click)="addToFavorite(match.id)">
It's short, simple and it works.
<ng-container *ngIf="(match | async) as match">
<div class="team" (click)="addToFavorite(match.id)">
</div>
</ng-container>
Update January 20th 2021
To be more clear I would name match observable source as match$.
And we can now use the new #ngrx/component package and use the new ngrxLet structural directive :
<ng-container *ngrxLet="match$ as match">
<div class="team" (click)="addToFavorite(match.id)">
</div>
</ng-container>
The async pipe is no more necessary.
More info on ngrx.io, on this link.

Answer 2

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>

Answer 3

You can't do it in template.
But you can:
<div class="team" (click)="addToFavorite()">
and in your .component.ts:
public addToFavorite() {
this
.match // should retain last value (e.g. use BehaviorSubject)
.first() // completes after passing one value only
.subscribe(
(matchValue) => {
// your logic here
});
}
Note: We are subscribing (and immediately unsubscribing), similarly async pipe subscribes to Observable.

Answer 4

What about:
<div class="team" (click)="addToFavorite(match)">
and then in your code:
addToFavorite(obs: Observable<any>) {
obs.take(1).subscribe(value => {
addToFavoriteById(value.id);
});
}

Answer 5

Seems you need to use a helper method:
<div class="team" (click)="onClick(match)">
class MyComponent {
onClick(event) {
event.then(val => this.addToFavorite(val?.id);
}
addToFavorite(val) {
}
}