DEV Community

loading...
Cover image for Angular 11 Firebase CRUD with Realtime Database

Angular 11 Firebase CRUD with Realtime Database

bezkoder profile image bezkoder ・3 min read

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:

Alt Text

Firebase Realtime Database right after the Operation:

Alt Text

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

Alt Text

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

Alt Text

– Update the Tutorial details with Update button:

Alt Text

– Delete the Tutorial using Delete button:

Alt Text

– Delete all Tutorials with Remove All button:

Alt Text

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) { }
}
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

- Create/Update an object:

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

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

- Update an object:

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

- Delete an object:

const tutRef = db.object('tutorial');
tutRef.remove();
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

+ 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();
Enter fullscreen mode Exit fullscreen mode

- Create a List and push a new object:

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

- 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' });
Enter fullscreen mode Exit fullscreen mode

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

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

- Delete an object in List:

const tutorialsRef = db.list('tutorials');
tutorialsRef.remove('key');
Enter fullscreen mode Exit fullscreen mode

- Delete entire List:

const tutorialsRef = db.list('tutorials');
tutorialsRef.remove();
Enter fullscreen mode Exit fullscreen mode

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:

Fullstack CRUD Application:

Discussion (0)

pic
Editor guide