Angular 11 Firebase CRUD with Realtime Database

In this tutorial, I will show you how to build Angular 11 CRUD App with Firebase Realtime Database that uses AngularFireDatabase service.

Full Article: https://bezkoder.com/angular-11-firebase-crud/

Overview

We’re gonna build an Angular 11 Firebase App using @angular/fire library in which:

• Each Tutorial has key, title, description, published status.
• We can create, retrieve, update, delete Tutorials.

Here are the screenshots:

– Create a new Tutorial:

Firebase Realtime Database right after the Operation:

– Retrieve all Tutorials with details when clicking on a Tutorial:

– Change status to Published/Pending using Publish/UnPublish button:

– Update the Tutorial details with Update button:

– Delete the Tutorial using Delete button:

– Delete all Tutorials with Remove All button:

AngularFireDatabase service

@angular/fire provides AngularFireDatabase service that allows us to work with the Realtime Database. It's an efficient, low-latency solution for apps that require synced states across clients in realtime.

import { AngularFireDatabase} from '@angular/fire/database';

export class TutorialService {
  constructor(private db: AngularFireDatabase) { }
}

AngularFireDatabase for Object

The AngularFireObject is a service for manipulating and streaming object data which is created via AngularFireDatabase service.

- Create an object binding/ Retrieve:

tutorial: AngularFireObject<any>;
// db: AngularFireDatabase
this.tutorial = db.object('tutorial');

// or
Observable<any> tutorial = db.object('tutorial').valueChanges();

- Create/Update an object:

const tutRef = db.object('tutorial');

// set() for destructive updates
tutRef.set({ title: 'zkoder Tutorial'});

- Update an object:

const tutRef= db.object('tutorial');
tutRef.update({ url: 'bezkoder.com/zkoder-tutorial' });

- Delete an object:

const tutRef = db.object('tutorial');
tutRef.remove();

AngularFireDatabase for List

Through the AngularFireDatabase service, we can create AngularFireList service that helps to synchronize data as lists.

- Create a list binding/ Retrieve:
+ Get an Observable of data as a synchronized array of JSON objects without snapshot metadata.

tutorials: Observable<any[]>;
// db: AngularFireDatabase
this.tutorials = db.list('tutorials').valueChanges();

+ Get an Observable of data as a synchronized array of AngularFireAction<DatabaseSnapshot>[] with metadata (the underyling DatabaseReference and snapshot key):

tutorials: Observable<any[]>;
this.tutorials = db.list('tutorials').snapshotChanges();

- Create a List and push a new object:

const tutorialsRef = db.list('tutorials');
tutorialsRef.push({ title: 'zkoder Tutorial', url: 'bezkoder.com/zkoder-tutorial' });

- Update a List: + destructive update using set(): delete everything currently in place, then save the new value

const tutorialsRef = db.list('tutorials');
tutorialsRef.set('key', { title: 'zkoder Tut#1', url: 'bezkoder.com/zkoder-tut-1' });

+ non-destructive update using update(): only updates the specified values

const tutorialsRef = db.list('tutorials');
tutorialsRef.update('key', { title: 'zkoder new Tut#1' });

- Delete an object in List:

const tutorialsRef = db.list('tutorials');
tutorialsRef.remove('key');

- Delete entire List:

const tutorialsRef = db.list('tutorials');
tutorialsRef.remove();

Technology

• Angular 11
• firebase 8
• @angular/fire 6
• rxjs 6

Implementation

For more details, implementation and Github, please visit:
https://bezkoder.com/angular-11-firebase-crud/

Further Reading

Related Posts:

• Angular 11 Firestore CRUD with AngularFireStore
• Angular 11 Firebase Storage: File Upload/Display/Delete Files example
• Angular 11 CRUD Application example with Web API

Fullstack CRUD Application:

• Angular + Node.js Express + MySQL example
• Angular + Node.js Express + PostgreSQL example
• Angular + Node.js Express + MongoDB example
• Angular + Spring Boot + MySQL example
• Angular + Spring Boot + PostgreSQL example
• Angular + Spring Boot + MongoDB example
• Angular + Django example
• Angular + Django + PostgreSQL example