An example of how to use a RemoteData object in a component

component.ts

@Component({
…
})
export class SomeComponent implements OnInit {
  collections$: Observable<RemoteData<PaginatedList<Collection>>>;

  constructor(
    private cds: CollectionDataService,
  ) {}

  ngOnInit(): void {
    this.collections$ = this.cds.findAll();
  }

}

template.html

<h3>Collections</h3>
<ng-container *ngVar="(collections$ | async) as collectionRD">
    <p *ngIf="collectionRD?.isLoading">Loading…</p>
    <p *ngIf="collectionRD?.hasFailed">Failed: {{collectionRD?.error?.message}}</p>
    <ul *ngIf="collectionRD?.hasSucceeded">
        <li *ngFor="let collection of collectionRD?.payload?.page">
            {{collection.name}}<br>
            <span class="text-muted">{{collection.shortDescription}}</span>
        </li>
    </ul>
</ng-container>