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

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:

Technology

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

Project Structure

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

Related Posts:

• Angular 11 Firebase CRUD Realtime DB | AngularFireDatabase
• Angular 11 Firebase Storage: File Upload/Display/Delete example

Comments

[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!

[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?