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

angular-6-firebase-crud-realtime-database-goal

1.2 Structure

angular-6-firebase-crud-realtime-database-project-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

app.module.ts

2.5 Model Class

customer.ts

2.6 Service

customer.service.ts

2.7 Customer Details Compoment

customer-details.component.ts

customer-details.component.html

2.8 Customers List Component

customers-list.component.ts

customers-list.component.html:

2.9 Create Customer Component

create-customer.component.ts

create-customer.component.html:

2.10 Routing Module

app-routing.module.ts

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-6-firebase-crud-realtime-database-result-add-customer

– View Customers and change Active Status:

angular-6-firebase-crud-realtime-database-result-update-customer

>> Firebase Console:

angular-6-firebase-crud-realtime-database-firebase-console-result

– Delete a Customer:

– Delete all Customers:

angular-6-firebase-crud-realtime-database-result-delete-all-customer

>> Firebase Console is clean now.

III. Source Code

Angular6FirebaseCRUD

By JavaSampleApproach | June 18, 2018.

Related Posts


Got Something To Say:

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

*