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 November 29, 2018.



Related Posts


12 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.

  6. Thanks for the example. Now I have made another page for editing those customers. On clicking the edit page i put
    Edit
    it goes to edit page and I get that key on edit page by
    id = this.route.snapshot.paramMap.get(‘id’);

    but I can’t fetch the whole object for that particular key (-LJiOhfDZOG_njZeSYch). can you please help me?

    Thank you.

  7. Finally. Something updated and works well…. Thank you! The documentation thru google and elsewhere is just not as straightforward as you presented it. Well done.

Got Something To Say:

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

*