Asynchronous pipe or how to update the value after loading the data?

Question

Angular

In various parts of the site, it is required to display amounts indicating the currency and some other modifications depending on the currency.
Information arrives from the back in the format

IMoney {
  sum: number;
  currencyId: number;
}

You need a pipe that will display this as 123$ or 234ETH depending on the currencyId The currency
information is stored in the service, and this service requests information from the back.
It often happens that the information that needs to be displayed is loaded earlier than the information about currencies and the pipe does not find the desired currency. How can this be resolved? Maybe the pipe can give information not instantly, but on the operation of the Observer'ra?

Answer 1

I think you can do it like this:
in the component where you need to use pipe, first
you request information about currencies,

loading: boolean = false;
 ngOnInit() {
   this.loading = true;
   this.service.getInfoValute().subscribe(res => {
     if (res) {
        this.loading = false;
     }
   });
 }

and in the template check:

<ng-container *ngIf="!loading">
  <div>{{ IMoney | pipe }}</div>
</ng-container>

Answer 2

As I understand it, you need to subscribe to currencies and to amounts
When both data packets come from the back, issue a derivative (amount, plus currency designation)
Sounds like
combineLatest

combineLatest(money$,currency$).subscribe(data = > /*тут работа с массивов, где data[0] - это последние пришедшие данные от money$ и data[1] - последние от currency$*/)
или
combineLatest(money$,currency$).subscribe(([money, currency]) = > /*...ваша логика*/)