Angular 11 Firebase CRUD with Realtime Database
Tags: angular, firebase, javascript, webdev
Published: 2020-12-26 03:09:30

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/](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](https://dev-to-uploads.s3.amazonaws.com/i/8il8zu99tpjgb7w1mz6i.png)

Firebase Realtime Database right after the Operation:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kvmh7wtzuhh474nqq6jc.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/iucy05mh37apmnhmfzh5.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/35jnjfdn9v9rwg5w8ntw.png)

– Update the Tutorial details with **Update** button:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lufvzjlzrdv8c30u474c.png)

– Delete the Tutorial using **Delete** button:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/v96g3vqftgdvpk2x86qu.png)

– Delete all Tutorials with **Remove All** button:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2s3vutme74grv50n0hwm.png)

## 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.
```js
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:
```js
tutorial: AngularFireObject<any>;
// db: AngularFireDatabase
this.tutorial = db.object('tutorial');
 
// or
Observable<any> tutorial = db.object('tutorial').valueChanges();
```

\- Create/Update an object:
```js
const tutRef = db.object('tutorial');
     
// set() for destructive updates
tutRef.set({ title: 'zkoder Tutorial'});
 ```   

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

\- Delete an object:
```js
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.
```js
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):
```js
tutorials: Observable<any[]>;
this.tutorials = db.list('tutorials').snapshotChanges();
```

\- Create a List and push a new object:
```js
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
```js
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
```js
const tutorialsRef = db.list('tutorials');
tutorialsRef.update('key', { title: 'zkoder new Tut#1' });
```

\- Delete an object in List:
```js
const tutorialsRef = db.list('tutorials');
tutorialsRef.remove('key');
```

\- Delete entire List:
```js
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/](https://bezkoder.com/angular-11-firebase-crud/)

## Further Reading
Related Posts:
- <a href="https://bezkoder.com/angular-11-firestore-crud-angularfirestore/">Angular 11 Firestore CRUD with AngularFireStore</a>
- <a href="https://bezkoder.com/angular-11-file-upload-firebase-storage/">Angular 11 Firebase Storage: File Upload/Display/Delete Files example</a>
- <a href="https://bezkoder.com/angular-11-crud-app/">Angular 11 CRUD Application example with Web API</a>

Fullstack CRUD Application:

*   [Angular + Node.js Express + MySQL example](https://bezkoder.com/angular-11-node-js-express-mysql/)
*   [Angular + Node.js Express + PostgreSQL example](https://bezkoder.com/angular-11-node-js-express-postgresql/)
*   [Angular + Node.js Express + MongoDB example](https://bezkoder.com/angular-11-mongodb-node-js-express/)
*   [Angular + Spring Boot + MySQL example](https://bezkoder.com/angular-11-spring-boot-crud/)
*   [Angular + Spring Boot + PostgreSQL example](https://bezkoder.com/angular-11-spring-boot-postgresql/)
*   [Angular + Spring Boot + MongoDB example](https://bezkoder.com/angular-11-spring-boot-mongodb/)
*   [Angular + Django example](https://bezkoder.com/django-angular-11-crud-rest-framework/)
*   [Angular + Django + PostgreSQL example](https://bezkoder.com/django-angular-postgresql/)