Angular 5 Firebase CRUD operations with AngularFire2 v5

In this tutorial, we’re gonna create a simple Angular 5 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 5 – AngularFire2 V5
Angular 5 Firebase – Upload/Display/Delete Files from Storage

I. Technology

– Angular 5
– 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 5 Firebase App using AngularFire2 that can:
– add/remove Customer
– show all Customers
– update Customer’s status

angular-5-firebase-crud-goal

1.2 Structure

angular-5-firebase-crud-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

customer-details.component.html:

2.7 Customers List Component

customers-list.component.html:

2.8 Create Customer Component

create-customer.component.html:

2.9 Routing Module

app.component.html:

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:
angular-5-firebase-crud-result-add-customer

– View Customers and change Active Status:
angular-5-firebase-crud-result-update-customer

>> Firebase Console:
angular-5-firebase-crud-result-console-customer

– Delete a Customer:
angular-5-firebase-crud-result-delete-customer

– Delete all Customers:
angular-5-firebase-crud-result-delete-all-customer

>> Firebase Console is clean now.

III. Source Code

Angular5FirebaseCRUD

By grokonez | February 17, 2018.

Last updated on June 18, 2018.



Related Posts


10 thoughts on “Angular 5 Firebase CRUD operations with AngularFire2 v5”

  1. Thank you for this tutorial. I was trying to find the right tutorial for angular 5, and this was it. I had problems with other tutorials as they were using angular 4 which in this case could be problematic.

  2. hi, i’m new with angular+firebase.
    how can i get a single object from database and show it in html?
    thanks 🙂

  3. I’m getting an error when I’m using customerService.getCustomersList()

    Uncaught TypeError: Object(…) is not a function
    at SwitchMapSubscriber.eval [as project] (changes.js:7)
    at SwitchMapSubscriber._next (switchMap.js:91)
    at SwitchMapSubscriber.Subscriber.next (Subscriber.js:95)
    at RefCountSubscriber.Subscriber._next (Subscriber.js:131)
    at RefCountSubscriber.Subscriber.next (Subscriber.js:95)
    at Subject.next (Subject.js:56)
    at ConnectableSubscriber.Subscriber._next (Subscriber.js:131)
    at ConnectableSubscriber.Subscriber.next (Subscriber.js:95)
    at Notification.observe (Notification.js:32)
    at AsyncAction.DelaySubscriber.dispatch (delay.js:91)

    Any idea how to fix this?

  4. I’m getting he same error when I’m using customerService.getCustomersList()

    Uncaught TypeError: Object(…) is not a function
    at SwitchMapSubscriber.eval [as project] (changes.js:7)
    at SwitchMapSubscriber._next (switchMap.js:91)
    at SwitchMapSubscriber.Subscriber.next (Subscriber.js:95)
    at RefCountSubscriber.Subscriber._next (Subscriber.js:131)
    at RefCountSubscriber.Subscriber.next (Subscriber.js:95)
    at Subject.next (Subject.js:56)
    at ConnectableSubscriber.Subscriber._next (Subscriber.js:131)
    at ConnectableSubscriber.Subscriber.next (Subscriber.js:95)
    at Notification.observe (Notification.js:32)
    at AsyncAction.DelaySubscriber.dispatch (delay.js:91)

    Any idea how to fix this?

  5. Hello Sir,

    I have been following your tutorials and i have absolutely found them updated to
    the latest versions of angular and they work.

    My question is about how to unsubscribe from a firebase list data.

    I would like to unsubscribe from it once i finish adding data to an array.

Got Something To Say:

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

*