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
Top comments (0)