Angular 11 Firestore CRUD: add/get/update/delete documents with AngularFireStore

4 min readDec 11, 2020

In this tutorial, I will show you how to build Angular 11 CRUD App with Firebase Cloud Firestore that uses AngularFireStore service to get/add/update/delete documents in a collection.

Angular 11 Firestore CRUD Overview

We’re gonna build an Angular 11 Firestore App using @angular/fire library in which:

Each Tutorial has id, title, description, published status.
We can create, retrieve, update, delete Tutorials.

Here are the screenshots:

– Create a new Tutorial:

Cloud Firestore after the Create Operations:

– Change status to Published/Pending using Publish/UnPublish button:

– Update the Tutorial details with Update button:

– Delete the Tutorial using Delete button:

AngularFireStore service

@angular/fire provides AngularFireStore service that allows us to work with the Firebase Firestore. It’s an efficient, low-latency solution for apps that require synced states across clients in realtime.

import { AngularFireStore } from '@angular/fire/store';

export class TutorialService {
  constructor(private db: AngularFireStore) { }
}

AngularFireStore for create/get/update/delete Document

The AngularFirestoreDocument is a service for manipulating and streaming document data which is created via AngularFireStore service.

– Create a document binding/ Retrieve:

tutorial: AngularFirestoreDocument<any>;
// db: AngularFireStore
this.tutorial = db.doc('tutorial');
 
// or
Observable<any> tutorial = db.doc('tutorial').valueChanges();

– Create/Update a document:

const tutRef = db.doc('tutorial');
 
// set() for destructive updates
tutRef.set({ title: 'zkoder Tutorial'});

– Update a document:

const tutRef= db.doc('tutorial');
tutRef.update({ url: 'bezkoder.com/zkoder-tutorial' });

– Delete a document:

const tutRef = db.doc('tutorial');
tutRef.delete();

AngularFireStore for create/get/update/delete Collection

Through the AngularFireStore service, we can create AngularFirestoreCollection service that helps to synchronize data as collection.

– Create a collection binding/ Retrieve:
+ Get an Observable of data as a synchronized array of JSON objects without snapshot metadata.

tutorials: Observable<any[]>;
// db: AngularFireStore
this.tutorials = db.collection('tutorials').valueChanges();

+ Get an Observable of data as a synchronized array of DocumentChangeAction[] with metadata (the underyling DocumentReference and snapshot id):

tutorials: Observable<any[]>;
this.tutorials = db.collection('tutorials').snapshotChanges();

– Create a collection and add a new document:

const tutorialsRef = db.collection('tutorials');
const tutorial = { title: 'zkoder Tutorial', url: 'bezkoder.com/zkoder-tutorial' };
tutorialsRef.add({ ...tutorial });

– Update a collection:
+ destructive update using set(): delete everything currently in place, then save the new value

const tutorialsRef = db.collection('tutorials');
tutorialsRef.doc('id').set({ title: 'zkoder Tut#1', url: 'bezkoder.com/zkoder-tut-1' });

+ non-destructive update using update(): only updates the specified values

const tutorialsRef = db.collection('tutorials');
tutorialsRef.doc('id').update({ title: 'zkoder new Tut#1' });

– Delete a document in collection:

const tutorialsRef = db.collection('tutorials');
tutorialsRef.doc('id').delete();

– Delete entire collection: Deleting Firestore collections from a Web client is not recommended.
You can find the solution here.

Technology

Angular 11
firebase 8
@angular/fire 6
rxjs 6

Project Structure

Let me explain it briefly.

– environment.ts configures information to connect with Firebase Project.
– models/tutorial.model.ts defines data model class.
– services/tutorial.service.ts exports TutorialService that uses @angular/fire‘s AngularFireStore to interact with Firebase FireStore.
– There are 3 components that uses TutorialService:

add-tutorial for creating new item
tutorials-list contains list of items, parent of tutorial-details
tutorial-details shows item details

– app-routing.module.ts defines routes for each component.
– app.component contains router view and navigation bar.
– app.module.ts declares Angular components and imports necessary environment & modules.

For more details, please visit:
https://bezkoder.com/angular-11-firestore-crud-angularfirestore/