Read

service

import { Injectable } from '@angular/core';
import { Firestore, collectionData } from '@angular/fire/firestore';
import { collection } from 'firebase/firestore';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class FirestoreService {
  constructor(private firestore: Firestore) {}

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

component

constructor(private clientService: FirestoreService) {}
clients$ = this.clientService.getAllClients();

template

<ul class="list-group">
  <li class="list-group-item" *ngFor="let client of clients$ | async">
    {{ client.firstName }}
  </li>
</ul>