Angular 11 Firestore CRUD: add/get/update/delete documents with AngularFireStore
Tags: Cloud Firestore, Angular 11, Angular, Firestore, Firebase

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

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

contains list of items, parent of 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/

Related Posts:

- Angular 11 Upload File to Firebase Storage: Display/Delete Files example

- Angular 11 Firebase CRUD with Realtime Database