Angular 8 Firebase CRUD operations with @angular/fire

https://grokonez.com/frontend/angular/angular-8/angular-8-firebase-tutorial-crud-operations-angular-fire-example

In this tutorial, we’re gonna create a simple Angular 8 Application that does CRUD to create, read, update, delete data to/from Firebase Realtime Database using @angular/fire.

Related Posts:

• Angular 8 Firebase tutorial: Integrate Firebase into Angular 8 App with @angular/fire
• Angular 8 Firestore tutorial with CRUD application example – @angular/fire
• Angular 8 – Upload/Display/Delete files to/from Firebase Storage using @angular/fire

Technology

• Angular 8
• @angular/fire 5.1.2
• firebase 5.9.4

  Video

  Firebase CRUD operations with @angular/fire

  Set up the Firebase Project & Install @angular/fire

  Please visit this post to know step by step.

  Firebase CRUD operations for Object

  Create an object binding/ Retrieve

  
  item: AngularFireObject;
  // db: AngularFireDatabase
  this.item = db.object('item');

// or
Observable item = db.object('item').valueChanges();

Create

// db: AngularFireDatabase
const itemRef = db.object('item');

// set() for destructive updates
itemRef.set({ name: 'grokonez'});

Update

// db: AngularFireDatabase
const itemRef = db.object('item');
itemRef.update({ url: 'grokonez.com'});

Delete

// db: AngularFireDatabase
const itemRef = db.object('item');
itemRef.remove();

List of Objects

Create a list binding/ Retrieve

• Returns an Observable of data as a synchronized array of JSON objects without snapshot metadata. It is simple to render to a view:

  
  items: Observable;
  // db: AngularFireDatabase
  this.items = db.list('items').valueChanges();
  

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

  
  items: Observable;
  // db: AngularFireDatabase
  this.items = db.list('items').snapshotChanges();
  

  Create

  
  // db: AngularFireDatabase
  const itemsRef = db.list('items');
  itemsRef.push({ site: 'grokonez.com' });
  

  Update

  
  // set(): destructive update
  // delete everything currently in place, then save the new value
  const itemsRef = db.list('items'); // db: AngularFireDatabase
  itemsRef.set('key', { url: 'jsa.com' });

// update(): non-destructive update
// only updates the values specified
const itemsRef = db.list('items'); // db: AngularFireDatabase
itemsRef.update('key', { url: 'javasampleapp.com' });

Delete

// db: AngularFireDatabase
const itemsRef = db.list('items');
itemsRef.remove('key');

// delete entire list
itemsRef.remove();

Firebase CRUD operations in Angular 8 example using @angular/fire

Project Overview

Goal

We will build an Angular 8 Firebase App using @angular/fire that can:

• add/remove Customer
• show all Customers
• update Customer's status

Project Structure

• environment.ts configure information to connect with Firebase Project.
• customer.ts defines Customer class data model.
• customer.service.ts defines CustomerService that uses @angular.fire to interact with Firebase.
• 3 Angular components:
• create-customer for creating new item.
• customer-details shows item detais
• customers-list contains list of items, this is parent component of customer-details
• app-routing.module.ts defines how we route Angular components.
• app.module.ts declares and imports necessary environment & modules.

  Step by Step

  Set up the Firebase Project & Install @angular/fire

  Please visit this post to know step by step.

  Add Firebase config to environments variable

  Open /src/environments/environment.ts, add your Firebase configuration that we have saved when Popup window was shown:

  
  export const environment = {
  ...
  firebase: {
  apiKey: 'xxx',
  authDomain: 'gkz-angular-firebase.firebaseapp.com',
  databaseURL: 'https://gkz-angular-firebase.firebaseio.com',
  projectId: 'gkz-angular-firebase',
  storageBucket: 'gkz-angular-firebase.appspot.com',
  messagingSenderId: '123'
  }
  };
  

  Create Service & Components

  Run the commands below:
• ng g s customers/Customer
• ng g c customers/CustomerDetails
• ng g c customers/CustomersList
• ng g c customers/CreateCustomer

https://grokonez.com/frontend/angular/angular-8/angular-8-firebase-tutorial-crud-operations-angular-fire-example