Angular 6 Firebase CRUD operations with AngularFire2 v5

In this tutorial, we’re gonna create a simple Angular 6 App that does CRUD to create, read, update, delete data to/from Firebase Realtime Database using AngularFire2.

Related Posts:
How to integrate Firebase with Angular 6 – AngularFire2 V5
Angular 6 Firebase – Upload/Display/Delete Files from Storage

I. Technology

– Angular 6
– AngularFire2 5.0

II. How to do

1. Set up the Firebase Project & Install AngularFire2

Please visit this post to know step by step.

2. Object
2.1 Create an object binding/ Retrieve

2.2 Create

2.3 Update

2.4 Delete

3. List of Objects
3.1 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 AngularFireAction<DatabaseSnapshot>[] with metadata (the underyling DatabaseReference and snapshot key):

3.2 Create

3.3 Update

3.4 Delete

III. Practice

1. Project Overview
1.1 Goal

We will build an Angular 6 Firebase App using AngularFire2 that can:
– add/remove Customer
– show all Customers
– update Customer’s status


1.2 Structure


2. Step by step
2.1 Set up the Firebase Project & Install AngularFire2

Please visit this post to know step by step.

2.2 Add Firebase config to environments variable

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

2.3 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

2.4 Setup @NgModule


2.5 Model Class


2.6 Service


2.7 Customer Details Compoment



2.8 Customers List Component



2.9 Create Customer Component



2.10 Routing Module



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

3. Check Result

– Open browser with url http://localhost:4200/.

– Add Customer:


– View Customers and change Active Status:


>> Firebase Console:


– Delete a Customer:

– Delete all Customers:


>> Firebase Console is clean now.

III. Source Code


By grokonez | June 18, 2018.

Related Posts

4 thoughts on “Angular 6 Firebase CRUD operations with AngularFire2 v5”

  1. How search a particular register on AngularFireDatabase? I’m stuck on how to get a record and how to look for it by a certain attribute.

Got Something To Say:

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