How to use arrayUnion with AngularFirestore?

Question

I have a basic database that essentially stores an array of product id's underneath a user. The user can select products to add to the array so it makes sense to use 'arrayUnion' so I avoid reading and re-writing the array constantly, however, I keep getting the error *"Property 'firestore' does not exist on type 'FirebaseNamespace'."

I've followed the documentation found at: https://firebase.google.com/docs/firestore/manage-data/add-data#update_elements_in_an_array but I fear I'm still using it incorrectly.

My code for updating the array is:

 addToPad(notepadName: string){
    const updateRef = this.db.collection('users').doc(this.activeUserID).collection('notepads').doc(notepadName);
    updateRef.update({
      products: firebase.firestore.FieldValue.arrayUnion(this.productId)
    });
  }

@PeterHaddad yes, though I can't find any documentation on the correct usage of arrayUnion with angularfire, so could only go off the standard firebase documentation — PeterL1995
– PeterL1995, Commented Dec 20, 2019 at 18:08

Peter Haddad · Accepted Answer · 2019-12-20 18:11:51Z

10

First you need to import firestore:

import { firestore } from 'firebase/app';

Then you will be able to use arrayUnion:

addToPad(notepadName: string){
    const updateRef = this.db.collection('users').doc(this.activeUserID).collection('notepads').doc(notepadName);
    updateRef.update({
      products: firestore.FieldValue.arrayUnion(this.productId)
    });
  }

answered Dec 20, 2019 at 18:11

Peter Haddad

81.2k26 gold badges148 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

PeterL1995 Over a year ago

Ah - perfect! I was using '@firebase/app' previously so this was the issue.

Bembem Over a year ago

Just in case import { firestore } from 'firebase/app'; throws an error, use import firebase from 'firebase/app'; Then the array update function updateRef.update({ products: firebase.firestore.FieldValue.arrayUnion(this.productId) }); Just Incase someone else has a similar issue. Reference - firebase.google.com/docs/firestore/manage-data/…

danday74 · Accepted Answer · 2022-03-25 05:40:21Z

6

import { arrayUnion } from '@angular/fire/firestore'

const path = `ai/${videoId}/panel-operation/${id}`
const myDoc: AngularFirestoreDocument<any> = this.afs.doc<any>(path)

const promise: Promise<void> = myDoc.update({ auxPanelSelections: arrayUnion({auxPanel: 'clip', operation: 'replace'}) }).catch((err: any) => {
  console.error(`oopsie - ${err.message}`)
  return null
})

auxPanelSelections is an array within the myDoc document

Note that the above code also works perfectly fine with arrayRemove

I cannot find the @angular/fire docs for arrayUnion but the generic docs are here

edited Mar 25, 2022 at 5:40

answered Mar 25, 2022 at 5:34

danday74

58.1k56 gold badges273 silver badges337 bronze badges

Collectives™ on Stack Overflow

How to use arrayUnion with AngularFirestore?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related