Angular 2 - Using pipe in (click) event

Question

My question is probably simple but just can't find the way to use pipe within an event like (click) for example. Something like this:

<button (click)="quizAnswers(answer?.texte | translate | async)"></button>

I always get an error. I tried to wrap it with () or {} or []... There are some workaround like putting the content in an attribute and then get it on the event with this.attribute but I'm sure there is a proper way !

Thanks in advance for your help

Answer 1

I just got through this same issue. Action expressions can't contain the async pipe. However, you can use a hidden <input> element to hold the latest value of the promise/observable stream, and then access that value anywhere.

  <input #dummy style="{display: none}" type="text" value="{{ myAsyncSource | async }}">
  <a (click)="myFunction(dummy.value)">{{ dummy.value }}</a>

For your case of <button> there's actually a one-line solution that eliminates the need for the dummy <input>, posted in this solution:

 <button type="button" #item value="{{i$ | async}}"  (click)="buttonClicked(item.value)">BUTTON</button>

Answer 2

A workaround would be to call your pipes in the click handler function instead:

function quizAnswers(answer)
{
    let translatePipe= new TranslatePipe();
    ...
    return translatePipe.transform(answer?.texte);
}