DEV Community

Cover image for Angular 11 Firestore CRUD example | AngularFireStore

Angular 11 Firestore CRUD example | 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.

Full Article:

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:

Alt Text

Cloud Firestore after the Create Operations:

Alt Text

– Get all Tutorial documents:

Alt Text

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

Alt Text

– Update the Tutorial details with Update button:

Alt Text

– Delete the Tutorial document using Delete button:

Alt Text


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

Project Structure

Alt Text

For more details, implementation and Github, please visit:

Further Reading

Related Posts:

Fullstack CRUD Application:

Discussion (0)

Forem Open with the Forem app