Show Menu

Angular Firebase Cheat Sheet by

angular     firebase

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' } });
  }

Download the Angular Firebase Cheat Sheet

2 Pages
//media.cheatography.com/storage/thumb/oisar_angular-firebase.750.jpg

PDF (recommended)

Alternative Downloads

Share This Cheat Sheet!

 

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
          AngularUI Router Cheat Sheet