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.

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

angular-4-firebase-crud-goal

1.2 Structure

angular-4-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-4-firebase-crud-result-add-item

– View Customers and change Active Status:
angular-4-firebase-crud-result-show-items

>> Firebase Console:
angular-4-firebase-crud-result-console-show-items

– Delete a Customer:
angular-4-firebase-crud-result-delete-item

– Delete all Customers:
angular-4-firebase-crud-delete-all-items

>> Firebase Console is clean now.

III. Source Code

Angular4Firebase-CRUD


Related Posts


Got Something To Say:

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

*