DEV Community

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

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

bezkoder profile image bezkoder Updated on ・2 min read

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:


– Retrieve all items:


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


– Update the Tutorial details with Update button:


– Delete the Tutorial using Delete button:



  • Angular 11
  • firebase 8
  • @angular/fire 6
  • rxjs 6

Project Structure


For more details, please visit:

Related Posts:

Discussion (2)

Editor guide
junhoyoon95 profile image
Junho Yoon

Another one, can I change user's email? To give you more context, I made an angular web with firebase signInWithEmailAndPassword and verify user by email. And I want to make ‘my page’ where user can change own email address. Thanks a lot!

junhoyoon95 profile image
Junho Yoon

Hi there! It has been difficult to find advanced information about this particular topic. This article helps me a lot! Massive thanks. I'm using Angular11 as Front and Firebase as Database. Quick question. I can't wrap my head around how to read data from firestore on specific conditions like SELECT user_address FROM Users WHERE user_name =='junho yoon'. Do you happen to have any leads?