I Dev

1608953253

Angular 11 Firebase CRUD Realtime DataBase | AngularFireDatabase

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) { }
}

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:

Fullstack CRUD Application:

#angular #firebase #javascript #web-development #rsjx #serverless

What is GEEK

Buddha Community

Angular 11 Firebase CRUD Realtime DataBase | AngularFireDatabase

Angular 10/9/8 Firebase CRUD Operations with Reactive Forms

I am going to share with you how to create CRUD Operations using Angular 10/9/8 and Firebase real-time NoSQL cloud database. We’ll be using Angular’s Reactive Forms service for managing the user submitted data in our web application.

For the demo purpose, we’ll be creating a basic student record management system in which a school admin can perform following tasks:

  • Create Student
  • Read Student
  • Update Student
  • Delete Student

#angular #bootstrap #firebase #popular tutorials #typescript #angular crud operations #angular firebase #firebase crud operations #javascript

Create database into firebase

https://youtu.be/u3F3GCdBu08

#firebase #firebase database #c# with firebase #c# with firebase database #c# with firebase tutorials #asp.net with firebase database

What is firebase,firebase bangla tutorial.

https://youtu.be/8BnVKuf1E5M

#firebase #firebase database #c# with firebase #c# with firebase tutorials #c# with firebase database #asp.net with firebase database

Macess  Hulk

Macess Hulk

1589199060

How to Connect Firebase Database with Angular App from Scratch?

Get started with Firebase Realtime NoSQL Database with Angular App from Scratch. Learn to create and consume CRUD operations using AngularFire library.

In this tutorial, We are going to learn How to connect Firebase Realtime NoSQL cloud database with Angular app from scratch?. We’ll be using AngularFire library for setting up Firebase database in the Angular web application.

#Angular #Firebase #Angular Firebase #NoSQL Database #Realtime Database

Angular 10 CRUD Firebase Realtime Database - use @angular/fire - loizenai.com

https://loizenai.com/angular-10-crud-firebase-realtime-database-angular-fire/

Tutorial: Angular 10 CRUD Firebase Realtime Database – use @angular/fire Example

The Firebase Realtime Database is a cloud-hosted NoSQL database that lets you store and sync data between your users in realtime. In the tutorial, I introduce how to build an “Angular 10 CRUD Firebase Realtime Database Example ” project with the help of @angular/fire lib to do CRUD operation: POST/GET/PUT/DELETE requests with step by step coding examples.

– I draw a fullstack overview diagram architecture from Angular frontend to Firebase Realtime Database.
– I illustrate details about @angular/fire CRUD operations.
– I implement Angular CRUD application with the @angular/fire lib to do CRUD request (Post/Get/Put/Delete) to Firebase Realtime database.

Angular Firebase Architecture

Angular CRUD Architecture

Angular CRUD Firebase realtime database successfully

Firebase Realtime database

#angular #firebase #database #crud