Avoiding multiple calls to observable$ | async in Angular 2+

1
votes

In my component, I have injected a service that provides the current language as an observable. In that component template, I'm displaying prices several times based upon the user's locale, in this manner:

<p>{{price.toLocaleString(languageService.getCurrentLanguage() | async, { style: 'currency', currency: 'EUR' })}}</p>

The issue is that I have like 10 async calls all over my template, and even though languageService actually returns the subject as a shared observable, effectively creating one shared stream instead of a different stream every time the async pipe subscribes, I'm willing to believe there's a better way to do this out there.

1
angularrxjsobservable

1 Answers

0
votes

Assign the observable to a field and bind to that field instead:

<p>{{price.toLocaleString(currentLanguage() | async, { style: 'currency', currency: 'EUR' })}}</p>

constructor(languageService:LanguageService) {
 this.currentLanguage = languageService.getCurrentLanguage();
}