Angular 4 Firebase CRUD operations with AngularFire2 v4

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

Updated Post:
Angular 5 Firebase CRUD operations with AngularFire2 v5

Related Post:
How to integrate Firebase with Angular 4

More Practice:
Angular 4 Firebase Pagination example with AngularFire2 v4
Angular 4 Firebase AutoComplete Search example with AngularFire2 v4
Angular 4 Firebase Filter Data example with AngularFire2 v4

I. Technology

– Angular 4
– AngularFire2 4.0

II. How to do

1. Set up the Firebase Project & Install AngularFire2

Please visit this post to know step by step.

2. Inject AngularFireDatabase service

Assume that we have a service which will use AngularFireDatabase service to work with single data object or list of data objects. We will also need FirebaseObjectObservable and FirebaseListObservable to be imported:

3. Object
3.1 Create an object binding/ Retrieve

There are two ways:

3.2 Create

3.3 Update

3.4 Delete

4. List of Objects
4.1 Create a list binding/ Retrieve

There are three ways:

4.2 Create

4.3 Update

4.4 Delete

III. Practice

1. Project Overview
1.1 Goal

We will build an Angular 4 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 Setup @NgModule

2.4 Model Class

2.5 Service

2.6 Customer Details Compoment


2.7 Customers List Component


2.8 Create Customer Component


2.9 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 | September 2, 2017.

Last updated on November 29, 2018.

Related Posts

3 thoughts on “Angular 4 Firebase CRUD operations with AngularFire2 v4”

  1. Thanks for your post. Your post provided so much help for my project to create users.
    But I am having a trouble because of the following errors. Please check them and let me know how to fix the errors.

    ERROR in src/app/customers/customer.service.ts(2,30): error TS2305: Module ‘”F:/Work/Angular/user-manage/node_modules/angularfire2/database/index”‘ has no exported member ‘FirebaseListObservable’.
    src/app/customers/customer.service.ts(2,54): error TS2305: Module ‘”F:/Work/Angular/user-manage/node_modules/angularfire2/database/index”‘ has no exported member ‘FirebaseObjectObservable’.
    src/app/customers/customer.service.ts(34,7): error TS2345: Argument of type ‘{ query: {}; }’ is not assignable to parameter of type ‘QueryFn’.
    Object literal may only specify known properties, and ‘query’ does not exist in type ‘QueryFn’.
    src/app/customers/customers-list/customers-list.component.ts(2,9): error TS2305: Module ‘”F:/Work/Angular/user-manage/node_modules/angularfire2/database/index”‘ has no exported member ‘FirebaseListObservable’.

    I look forward to hearing from you asap.

    1. Hi Daing Sean,

      This tutorial uses AngularFire2 V4.
      FirebaseListObservable is replaced by AngularFireList in AngularFire2 V5. We will post new tutorials for AngularFire2 V5 in the future.


Got Something To Say:

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