Angular 8 Firebase CRUD operations with @angular/fire

angular-8-firebase-tutorial-crud-angular-fire-feature-image

In this tutorial, we’re gonna create a simple Angular 8 Application that does CRUD to create, read, update, delete data to/from Firebase Realtime Database using @angular/fire.

Related Posts:
Angular 8 Firebase tutorial: Integrate Firebase into Angular 8 App with @angular/fire
Angular 8 Firestore tutorial with CRUD application example – @angular/fire
Angular 8 – Upload/Display/Delete files to/from Firebase Storage using @angular/fire

Technology

– Angular 8
– @angular/fire 5.1.2
– firebase 5.9.4

Video

Firebase CRUD operations with @angular/fire

Set up the Firebase Project & Install @angular/fire

Please visit this post to know step by step.

Firebase CRUD operations for Object
Create an object binding/ Retrieve

Create

Update

Delete

List of Objects
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):

Create

Update

Delete

Firebase CRUD operations in Angular 8 example using @angular/fire

Project Overview
Goal

We will build an Angular 8 Firebase App using @angular/fire that can:
– add/remove Customer
– show all Customers
– update Customer’s status

angular-8-firebase-crud-realtime-database-app

Project Structure

angular-8-firebase-crud-realtime-database-project-structure

environment.ts configure information to connect with Firebase Project.
customer.ts defines Customer class data model.
customer.service.ts defines CustomerService that uses @angular.fire to interact with Firebase.
– 3 Angular components:
+ create-customer for creating new item.
+ customer-details shows item detais
+ customers-list contains list of items, this is parent component of customer-details
app-routing.module.ts defines how we route Angular components.
app.module.ts declares and imports necessary environment & modules.

Step by Step
Set up the Firebase Project & Install @angular/fire

Please visit this post to know step by step.

Add Firebase config to environments variable

Open /src/environments/environment.ts, add your Firebase configuration that we have saved when Popup window was shown:

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

Setup @NgModule

app.module.ts

Create Model Class

customer.ts

The key field is important for updating item.

Create Data Service

customer.service.ts

Create Component for item Details

customer-details.component.ts

customer-details.component.html

Create Component to show List of Items

customers-list.component.ts

In the code above, we use snapshotChanges() with RxJS map() operator to get the key (Firebase id) of each item.

customers-list.component.html:

We pass each customer item data to customer-details component.

Create Component to save item

create-customer.component.ts

create-customer.component.html:

Define App 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

Run & Check Result

– Run Angular App with command: npm start.
– Open browser with url http://localhost:4200/.

angular-8-firebase-crud-realtime-database-demo-app

Source Code

Angular8FirebaseCRUD

By grokonez | April 24, 2019.



Related Posts


1 thought on “Angular 8 Firebase CRUD operations with @angular/fire”

Got Something To Say:

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

*