Angular Streams and Async Pipes

1// component
2  ngOnInit() {
3    const source$ = this.apollo.query({
4      query: gql`
5        {
6          rates(currency: "USD") {
7            currency
8            rate
9          }
10        }
11      `
12    }).pipe(shareReplay(1));
13
14    this.rates$ = source$.pipe(map(result => result.data && result.data.rates));
15    this.loading$ = source$.pipe(map(result => result.loading));
16    this.errors$ = source$.pipe(map(result => result.errors));
17  }
18
19
20// template
21<div *ngFor="let rate of rates$ | async">
22  <p>{{rate.currency}}: {{rate.rate}}</p>
23</div>