Angular Firebase Tutorial: Update data into a NoSql Database Collection

Firebase Cloud Firestore, which is currently in beta stage, is “the next generation of the Realtime Database with more powerful queries and automatic scaling.” It is was acquired by Google in 2014, and is a realtime cloud-based NoSql database solution.

Now that I have shown you how to read and write data to Firebase’s Firestore, after this article, you will be able to update data.

Step 1: Set up your environment.

To set up your Firebase environment, please see my previous article.

Step 2: Set up some data in the database

Add a collection called items, give it a document id of 1, and then give a field called name.

Step 3: Modify your html with the new fields and buttons.

We will need a textbox, button, and a variable to asynchronously bind the data to.


<div style="text-align:center">
Update this new item:
{{ (item | async)?.name }}<br>
<input #updateName><br>
<button (click)="update(updateName.value)">Change User Name</button>

Step 4: Modify your typescript.

We need to write and update function, and modify the constructor to initially get the items collection. Also, we are going to need to use an interface for the item.

export interface Item {
name: string;

In the constructor, inject the AngularFirestore services, and then bind to the Item collection.

constructor(public afAuth: AngularFireAuth, db: AngularFirestore) {
this._db = db;
this.itemDoc = this._db.doc<Item>('items/1');
this.item = this.itemDoc.valueChanges();

Now write your update function.

update(sName: string) {
let tmp: Item = { name: sName };

Finally: Run the app.

To run in development mode, open a terminal and run:

ng serve — open

To build for production with AOT and treeshaking:

ng build --prod --build-optimizer

Here is the git repo.

Download Chrome Extension or visit