Angular 8 Firestore tutorial with CRUD application example – @angular/fire

Cloud Firestore helps us store data in the cloud. It supports offline mode so our app will work fine (write, read, listen to, and query data) whether device has internet connection or not, it automatically fetches changes from our database to Firebase Server. We can structure data in our ways to improve querying and fetching capabilities. This tutorial shows you how to work with Firebase Firestore along with an Angular app that can do CRUD Operations.

Related Posts:
Angular 8 Firebase tutorial: Integrate Firebase into Angular 8 App with @angular/fire
Angular 8 Firebase CRUD operations with @angular/fire
Angular 8 – Upload/Display/Delete files to/from Firebase Storage using @angular/fire


– Angular 8
– @angular/fire 5.1.2
– firebase 5.10.1


Firebase Firestore with @angular/fire

Set up the Firebase Project & Install @angular/fire

Please visit this post to know step by step.

The only different for this tutorial is that, we use Firebase Firestore instead of Firebase Realtime Database:


Firebase Firebase CRUD operations for Object
Create an object binding/ Retrieve




Firebase Firebase CRUD operations for List of Objects
Create a list binding/ Retrieve

– Returns an Observable of data as a synchronized array of JSON objects without snapshot metadata. It is simple to render to a view:

– Returns an Observable of data as a synchronized array of DocumentChangeAction<>[] with metadata (the underlying data reference and snapshot id):




Configure offline persistence

By default, offline persistence is disabled. To enable it, call enablePersistence() method:

Firebase Firestore CRUD in Angular 8 App using @angular/fire

Project Overview

We will build an Angular 8 Firebase App using @angular/fire that can:
– add/remove Customer
– show all Customers
– update Customer’s status
to Firebase Firestore.


Project Structure


environment.ts configure information to connect with Firebase Project.
customer.ts defines Customer class data model.
customer.service.ts defines CustomerService that uses to interact with Firebase.
– 3 Angular components:
+ create-customer for creating new item.
+ customer-details shows item detais
+ customers-list contains list of items, this is parent component of customer-details
app-routing.module.ts defines how we route Angular components.
app.module.ts declares and imports necessary environment & modules.

Step by Step
Set up the Firebase Project & Install @angular/fire

Please visit this post to know step by step.


Add Firebase config to environments variable

Open /src/environments/environment.ts, add your Firebase configuration that we have saved when Popup window was shown:


Create Service & Components

Run the commands below:
ng g s customers/Customer
ng g c customers/CustomerDetails
ng g c customers/CustomersList
ng g c customers/CreateCustomer

Setup @NgModule


Create Model Class


The key field is important for updating item.

Create Data Service


Create Component for item Details



Create Component to show List of Items


In the code above, we use snapshotChanges() with RxJS map() operator to get the id of each item and assign to key field.


We pass each customer item data to customer-details component.

Create Component to save item



Define App Routing Module



To understand how to use Angular Routing Module, please visit:
How to work with Angular Routing – Spring Boot + Angular 4

Run & Check Result

– Run Angular App with command: npm start.
– Open browser with url http://localhost:4200/.


Result in Firestore console:


Source Code



Now we’ve known how to connect Angular App with Firebase Firestore, how to make CRUD operations with Firestore for Object or List of Objects. We also created an Angular 8 Application that can save, receive, update, delete items with Firestore Database.

Happy learning!

By grokonez | April 30, 2019.

Related Posts

3 thoughts on “Angular 8 Firestore tutorial with CRUD application example – @angular/fire”

  1. Thanks a lot, its really helpful but i have been trying to update record using a form but to no avail. I need help please, i am a novice of angular.

  2. Hi I am getting the following error while serving the application

    This likely means that the library (@angular/fire/firestore) which declares AngularFirestore has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library’s authors to see if
    the library is expected to be compatible with Ivy.

Got Something To Say:

Your email address will not be published. Required fields are marked *