How to add elements and remove elements in the array, create custom id using Firestore (Angular)?

2 min readAug 8, 2021

First of all import Angular Firestore in the service file and make an alias in the constructor

import { AngularFirestore } from '@angular/fire/firestore';
  constructor(
    private firestore: AngularFirestore
  ) { }

To create a custom id in firestore we are using the `set` keyword

this.firestore.collection(mycollectionname).doc(myCustomId).set(data);Example:- Assume collection name is users, and custom id 'VK' with some datalet data = {
  firstName: 'Vikas', lastName: 'Kohli'
}
this.firestore.collection('users').doc('VK').set(data);//overwrite or creaate new document

The above statement will create a new document with a custom id as ‘VK’ in the user's collection. Also if any document already exists with VK custom id then that data will also override.

For reference:- https://firebase.google.com/docs/firestore/manage-data/add-data#set_a_document

Push Data in the array, if not created create that key and add that.

First of all, we need to import firebase to use Firestore arrayUnion or arrayRemove

import * as firebase from "firebase/app";

now we can use arrayUnion like firebase.firestore.FieldValue.arrayUnion or firebase.firestore.FieldValue.arrayRemove.

For adding Data in Array


addingInArray(key: string, arrKey: string, data: any) {
    return this.firestore.doc('users/' + key).set(
       { [arrKey]:  firebase.firestore.FieldValue.arrayUnion(data), updated: new Date() },
       { merge: true }
    );
  }

For Removing Data in Array

removeDataFromArray(key: string, arrKey: string, data: any) {
    return this.firestore.doc('users/' + key).set(
       { [arrKey]:  firebase.firestore.FieldValue.arrayRemove(data), updated: new Date() },
       { merge: true }
    );
  }

Let’s consider an example for adding data in the array:-

Adding
this.firestore.doc('users/' + 'VK').set(
       { hobbies:  firebase.firestore.FieldValue.arrayUnion({name: "Watching Moviews", short: "w"}), updated: new Date() },
       { merge: true }
    );

Here in above, I have added one object in the hobbies, if hobbies are not created then it will auto-create.

If hobbies array are already created, then it will append that object in the hobbies array

Also, I have updated the field which I update to the current Date.

Using of merge: true helps to merge the existing document if there

Now consider an example for removing data in the array:-

Removing
this.firestore.doc('users/' + 'VK').set(
       { hobbies:  firebase.firestore.FieldValue.arrayRemove({name: "Watching Moviews", short: "w"}), updated: new Date() },
       { merge: true }
    );

In above, the object which is added in the hobbies with names “Watching Movies” and short “W” will be removed. and that object should be similar to the object which is added otherwise it won’t remove anything from hobbies Array

Update and Removing Elements from Array — https://firebase.google.com/docs/firestore/manage-data/add-data#update_elements_in_an_array

In a similar way, it can be done in javascript too

Happy Clouding with Firestore 😊

How to add elements and remove elements in the array, create custom id using Firestore (Angular)?

Written by Vikas Kohli