Add, update and read sub-collection in firestore using Angular (@angular/fire)

Question

I am trying to learn firebase. I am making a project like Linkedin using Angular and Firebase.

I am using the @angular/fire package in my project.

So far I have done authentication and adding some basic info of a user. I have users collection where each documentId have information like name, email and etc

Now my next goal is to create a work experience section. Since a user can have multiple work experience.

I have to decided to proceed with sub-collection under each user document id instead of creating a separate collection for work-experience.

Now I am having a bit trouble how to add sub-collection in my users collection.

A user can only add/update one experience at a time. My UI will be something similar to Linkedin. When the 'Add Experience' button is clicked a modal will pop up and there will be a form inside the form with fields such as jobTitle, companyName and etc. So once the submit is clicked I want to save that data under the work-experience sub-collection with a unique documentId.

Currently I am adding my basic info like this

Adding

addUser(user: any): Observable<void> {
   const ref = doc(this.firestore, 'users', user.uid);
  return from(setDoc(ref, user));
}

Updating

 updateUser(user: any): Observable<void> {
    const ref = doc(this.firestore, 'users', user.uid);
    return from(updateDoc(ref, { ...user }));
 }

Now I want to add sub-collection called work-experience under the users collection.

Renaud Tarnec · Accepted Answer · 2022-04-30 14:54:38Z

3

From your other question I think you need to add a sub-collection which contains a document with ID work-experience.

If my assumption is correct, do as follows to create the DocumentReference to this Document:

const workExperienceDocRef = doc(this.firestore, `users/${user.uid}/sub-sections/work-experience`);

Note: Make sure to use back ticks.

And then you can set the data of this doc as follows, for example:

return from(setDoc(workExperienceDocRef, {experiences: [{years: "2015-2018", company: "comp1"}, {years: "2018-2021", company: "comp2"}]}));

If you want to create a sub-collection for the user's document, do as follows:

const userSubCollection = collection(this.firestore, `users/${user.uid}/sub-collection`);

Then you can use the addDoc() method, which will automatically generate the document ID.:

const docRef = await addDoc(userSubCollection, {
  foo: "bar",
  bar: "foo"
});

edited Apr 30, 2022 at 14:54

answered Apr 30, 2022 at 14:25

Renaud Tarnec

83.4k10 gold badges99 silver badges130 bronze badges

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

10 Comments

Enigma Panda Over a year ago

Hey there, Thank you. your second solution using the addDoc is the one I was looking for. I wanted something like under the users collection there will be a sub-collection called work-experience which will have unique document id with fields such as comanyName and etc.

Enigma Panda Over a year ago

If I want to update an existing work-experience should I use the updateDoc method?

Renaud Tarnec Over a year ago

Yes, updateDoc() is for updating a document. But you need to know it's ID (you already know it's parent sub-collection). This means that you need to store somewhere the document ID generated by the addDoc() method.

Renaud Tarnec Over a year ago

Please follow the link I've mentioned in my comment. You need tio use the getDocsmethod which is asynchronous.

const querySnapshot = await getDocs(collection(...)); querySnapshot.forEach((doc) => {   // doc.data() is never undefined for query doc snapshots   console.log(doc.id, " => ", doc.data()); });

Enigma Panda Over a year ago

@ Renaud Tarnec Thank you very much. I will progress with this for now. If I need any further help I will ask separate question. Thank you very much for all your help. Really appreciate it.

|

Collectives™ on Stack Overflow

Add, update and read sub-collection in firestore using Angular (@angular/fire)

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related