The collection reference method *.valueChanges(...) visualized (and explained)!

Context
Building a kanban board at workshop at Google I/O 2021 Building a web application with Angular and Firebase presented by Mark Thompson.

| Angular 12.0.1 | firebase 9.11.0 | Node 14.17 |

Taking Mark's instruction a bit further; to achieve drag&drop in a bit more realistic situation, calling the store in a service asynchronously. To achieve this status, I stumbled on the .valueChanges(...) method.

The internal firestore documents explains the working of this .valueChanges(...) method as it listen to all documents in the retrieved collection and queries this list as an Observable.
This method provides the option of setting the idField. When the idField option is provided like
.valueChanges({idField: '<a-property-of-the-document'}) it means that the document ID (actually the document's name) will be mapped to the provided property being one of the properties within the document-object.

Know the construction of the document, in this case document (ITask) = { id?: string; title?:string; description?: string'; }.

The interface used to obtain documents within the collection (must) contain an optional property .

When calling the .valueChanges(...) method with a provided idField, which is set to one of the provided properties as stated, internally, the ID (actually the document's name) of that document is mapped to the 'provided'-property within the document object.
See
gif

The service
Notice: No need of using snapshotChanges() as stated elsewhere.