Call Async Functions (Retunes Observable) From HTML Template

Data displayed on HTML template is Key form data. Meaning, it needs to be translated. For that purpose, I would like to call an Async function from my template. Tried this, with no

Solution 1:

tl;dr Don't use the async pipe with function calls. This is expensive and long-running and can destroy the user experience or in your case crash your browser: Manage your observables yourself and not with the easy to use async pipe.

If you still want to use the async pipe with a function, you can try using the ChangeDetectionStrategy.OnPush. This comes with other downsides, such as running the change detection manually, e.g. with this.cdr.detectChanges(); and cdr being of type ChangeDetectorRef.

---

Please be aware of how Angulars Lifecycle system works.

Since evaluated function values do not have an internal reference (which Angular uses to check whether values have changed or need to be updated), they won't be checked by the lifecycle hook ngOnChanges, but rather with ngDoCheck, which runs a lot of times.

This is especially bad with pipes, and the worst with the async pipe. If we call your usage of async pipes expensive and long running, Angular states, that:

An expensive and long-running pipe could destroy the user experience

or in your case crash the browser.

Please find this blog post for further explanation.