Read

Service

constructor(private readonly firestore: Firestore) {}

getAllMovies$(): Observable<any[]> {
    const itemCollection = collection(this.firestore, 'movies');
    return collectionData(itemCollection, { idField: 'id' });
}

Component

constructor(private readonly movieService: MovieService) {}
items$ = this.movieService.getAllMovies$();

Template

<div class="movies">
  <div class="card" *ngFor="let item of items$ | async">
    <img class="card-img-top" [src]="item.image" [alt]="item.title" />
    <h4 class="card-header">{{ item.title }}</h4>
  </div>
</div>

Definition

export type IMovie = {
  readonly title: string;
  readonly imdb: number;
  readonly genre: string;
  readonly year: number;
  readonly image: string;
};