Show Menu
Cheatography

Angular Firebase Cheat Sheet by

Get all from collection

this.db.collection(collection)
.valueChanges()
.subscribe();
Returns the current state of the collection (obser­vable).
Is great for only displaying data, we don't receive any metadata and id.

Querying snapsh­otC­hanges vs stateC­hanges

this.db.collection(collection)
.valueChanges().subscribe(
   snaps => {
      const collection = snaps.map( snap => {
          return {
             id: snap.payload.doc.id,
             ...snap.payload.doc.data()
          }
      }
    }
);
Receive document snapshot with type and payload. Returns an observable with all data.

Querying snapsh­otC­hanges vs stateC­hanges

this.db.collection(collection)
.stateChanges().subscribe(
   snaps => {
      const collection = snaps.map( snap => {
          return {
             id: snap.payload.doc.id,
             ...snap.payload.doc.data()
          }
      }
    }
Receive document snapshot with type and payload. Returns an observable with only updated data (live updated).

Querying with ordering

this.db.collection(collection, ref => {
  return ref.orderBy(param).where(param, "==", what)
})
.snapshotChanges()...}}
...
.where(param, "== , >, <= or any", what)...
.where(param, "array-contains", what)...
.startAt(number).endAt(number)... (first element included)
.startAfter(number).endAt(number)...(first element is not included)
Ordered by params.
 

Update collection

this.db.doc(collection/id).set(changes)...

this.db.doc(collection/id).update(changes)...
set - update the collection or create one if not exist
update - only update the collection

Batch collection

const fRef = this.db.doc(collection/id).ref;
const oRef = this.db.doc(collection/id).ref;

const batch = this.db.firestore.batch();

batch.update(fRef, { updates });
...
const batch$ = of(batch.commit());
batch$.subscribe();
Updates documents by its ref. Up to 500 data operation in the same batch.

Delete collection

const d = this.db
.collection(collection);
return d.doc(id).delete();
Delete document by id
 

Simple file upload

private storage: AngularFireStorage;
...
upload(event) {
 const file: File = event.target.files[0];
 const path = collection/id/filename;
 const task = this.storage.upload (path, file);
 task.snapshotChanges().subscribe();
}
...
task.percentageChanges() - get current upload percentage

File upload info and metadata

profileUrl: Observable<string | null>;
  constructor(private storage: AngularFireStorage) {
     const ref = this.storage.ref('users/davideast.jpg');
     this.profileUrl = ref.getDownloadURL();
  }
...
meta: Observable<any>;
  constructor(private storage: AngularFireStorage) {
     const ref = this.storage.ref('users/davideast.jpg');
     this.meta = ref.getMetadata();
  }
...
uploadFile(event) {
    const file = event.target.files[0];
    const filePath = 'name-your-file-path-here';
    const ref = this.storage.ref(filePath);
    const task = ref.put(file, { customMetadata: { blah: 'blah' } });
  }

Help Us Go Positive!

We offset our carbon usage with Ecologi. Click the link below to help us!

We offset our carbon footprint via Ecologi
 

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          AngularJS Cheat Sheet
          Angular 2 Forms Cheat Sheet