How to get Firestore collectionGroup datas as an Observable in Angular?

Question

From the https://firebase.google.com/docs/firestore/query-data/queries documentation snippet, Im unable to get the results as an Observable

import { collectionGroup, query, where, getDocs } from "firebase/firestore";  

const museums = query(collectionGroup(db, 'landmarks'), where('type', '==', 'museum'));
const querySnapshot = await getDocs(museums);
querySnapshot.forEach((doc) => {
    console.log(doc.id, ' => ', doc.data());
});

So I wrote it like this:

const museums = query(
  collectionGroup(db, 'landmarks'),
  where('type', '==', 'museum')
);
const querySnapshot = await getDocs(museums);
const datas = querySnapshot.docs.map((doc) => {
  return doc.data() as Data;
});
console.log(datas);
return of(datas);

But I'm not getting results when subscribing to it or in the DOM using async pipe, but when I console.log(), there is an array of data.

component.html

{{ museums_data$ | async }}

component.ts

this.museums_data$.subscribe((datas) => console.log(datas));

Answer 1

I found it here: https://code.build/p/LWmSi3HfQzu5TMKPzb5p6i/angular-12-with-firebase-9, which is written for the collection. Assuming it should also work for collection groups, I tried it, and it performed as expected.

This is a code snippet found in the link:

collectionData<Post>(
      query<Post>(
        collection(this.afs, 'posts') as CollectionReference<Post>,
        where('published', '==', true)
      ), { idField: 'id' }
    );

to:

collectionData<Landmark>(
      query<Landmark>(
        collectionGroup(db, 'landmarks') as CollectionReference<Landmark>,
        where('type', '==', 'museum')
      ), { idField: 'id' }
    );