Angular async parameter in template statement

Question

I'm currently having a hard time trying to figure out how to use async parameter in a template statement while doing event binding.

I've tried the following snippet:

<div (click)="goToProfile((user|async)?.id)"></div>

and it fails with

ng: Parser Error: Cannot have a pipe in an action expression at column 20 in [goToProfile((user|async)?.id)] in @2:19 ng: The pipe '' could not be found

Answer 1

you can do it like that

<div *ngIf="user | async as u" (click)="goToProfile(u.id)"></div>

Answer 2

I believe it's telling you that you cannot use a pipe on a parameter passed into a function.

you would have to do do something like

{{ user | async }}

or

goToProfile(user ? user.id : null)

if you're just trying to wait for the object to be populated, maybe something like

<div *ngIf="user">
    <div (click)="goToProfile(user.id)"></div>
</div>