feat(firestore): Added option to include document IDs on valueChanges()

An 'idField' string arg can be used with collection.valueChanges() to include the document ID on the emitted data payload.

Author: codediodeio

docs/firestore/collections.md

@@ -73,9 +73,9 @@ interface DocumentSnapshot {
 
 There are multiple ways of streaming collection data from Firestore. 
 
-### `valueChanges()`
+### `valueChanges(idField?: string)`
 
-**What is it?** - The current state of your collection. Returns an Observable of data as a synchronized array of JSON objects. All Snapshot metadata is stripped and just the method provides only the data.
+**What is it?** - The current state of your collection. Returns an Observable of data as a synchronized array of JSON objects. All Snapshot metadata is stripped and just the method provides only the data. Optionally, you can pass an `idField` string to include the document ID.  
 
 **Why would you use it?** - When you just need a list of data. No document metadata is attached to the resulting array which makes it simple to render to a view.
 

src/firestore/collection/collection.spec.ts

@@ -1,7 +1,6 @@
 import { FirebaseApp, AngularFireModule } from '@angular/fire';
 import { AngularFirestore } from '../firestore';
 import { AngularFirestoreModule } from '../firestore.module';
-import { AngularFirestoreDocument } from '../document/document';
 import { AngularFirestoreCollection } from './collection';
 import { QueryFn } from '../interfaces';
 import { Observable, BehaviorSubject, Subscription } from 'rxjs';
@@ -70,6 +69,19 @@ describe('AngularFirestoreCollection', () => {
 
     });
 
+    it('should optionally map the doc ID to the emitted data object', async (done: any) => {
+      const ITEMS = 1;
+      const { ref, stocks, names } = await collectionHarness(afs, ITEMS);
+      const idField = 'myCustomID';
+      const sub = stocks.valueChanges(idField).subscribe(data => {
+        sub.unsubscribe();
+        const stock = data[0];
+        expect(stock[idField]).toBeDefined();
+        expect(stock).toEqual(jasmine.objectContaining(FAKE_STOCK_DATA));
+        deleteThemAll(names, ref).then(done).catch(fail);
+      })
+    });
+
     it('should handle multiple subscriptions (hot)', async (done: any) => {
       const ITEMS = 4;
       const { randomCollectionName, ref, stocks, names } = await collectionHarness(afs, ITEMS);

src/firestore/collection/collection.ts

@@ -104,12 +104,18 @@ export class AngularFirestoreCollection<T=DocumentData> {
   /**
    * Listen to all documents in the collection and its possible query as an Observable.
    */
-  valueChanges(): Observable<T[]> {
+  valueChanges(idField?: string): Observable<T[]> {
     const fromCollectionRef$ = fromCollectionRef<T>(this.query);
     const scheduled$ = this.afs.scheduler.runOutsideAngular(fromCollectionRef$);
     return this.afs.scheduler.keepUnstableUntilFirst(scheduled$)
       .pipe(
-        map(actions => actions.payload.docs.map(a => a.data()))
+        map(actions => actions.payload.docs.map(a => { 
+            return { 
+              ...a.data() as Object, 
+              ...(idField ? { [idField]: a.id } : null) 
+            } as T;
+          })
+        )
       );
   }