Skip to content

Proposal: New observable properties #1819

Closed
@davideast

Description

@davideast

Properties not methods!

We’re thinking about introducing a new properties on the AngularFireCollection and AngularFireDocument classes.

const itemsCollection = afs.collection(‘items’, { includeMetadataChanges: false });
const itemSnap$ = itemsCollection.querySnapshot;
const items$ = itemsCollection.docs;
const itemsChanges$ = itemsCollection.docsChanges;

items$.subscribe(snapshot => {
  console.log(snapshot.docs);
  console.log(snapshot.docChanges);
});

items$.subscribe(docs => {
  const first = docs[0];
  console.log(first.data());
});

itemsChanges$.subscribe(changes => {
  const first = changes[0];
  console.log(first.type, first.data());
});

This helps avoid the sticky situation of loops. If you create an observable as a function inside a loop each render creates multiple observables with multiple subscriptions. If each observable has a different query criteria it will act unpredictably.

<!-- DONT DO THIS! -->
<ul>
  <li *ngFor=”let item of itemsCollection.snapshotChanges() | async”></li>
</ul>

Using a propery ensures that it’s only one instance of the observable, eliminating the unpredictable situations.

<!-- SO MUCH BETTER! -->
<ul>
  <li *ngFor=”let item of itemsCollection.docs | async”></li>
</ul>

We'll also add this for documents.

const itemDoc = afs.document(‘items/1, { includeMetadataChanges: false });
const item$ = itemDoc.doc;

item$.subscribe(doc => {
  console.log(doc.data());
});

Leave a comment and let us know what you think of this proposal.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions