In this tutorial, we’re gonna create a simple Angular 5 App that does CRUD to create, read, update, delete data to/from Firebase Realtime Database using AngularFire2.

Related Posts:
– How to integrate Firebase with Angular 5 – AngularFire2 V5
– Angular 5 Firebase – Upload/Display/Delete Files from Storage

I. Technology

– Angular 5
– AngularFire2 5.0

II. How to do

1. Set up the Firebase Project & Install AngularFire2

Please visit this post to know step by step.

2. Object

2.1 Create an object binding/ Retrieve

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

2.2 Create

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

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

2.3 Update

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

2.4 Delete

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

3. List of Objects

3.1 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();

3.2 Create

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

3.3 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' });

3.4 Delete

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

// delete entire list
itemsRef.remove();

III. Practice

1. Project Overview

1.1 Goal

We will build an Angular 5 Firebase App using AngularFire2 that can:
– add/remove Customer
– show all Customers
– update Customer’s status

1.2 Structure

2. Step by step

2.1 Set up the Firebase Project & Install AngularFire2

Please visit this post to know step by step.

2.2 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 = {
  production: false,
  firebase: {
    apiKey: 'xxx',
    authDomain: 'jsa-angular5.firebaseapp.com',
    databaseURL: 'https://jsa-angular5.firebaseio.com',
    projectId: 'jsa-angular5',
    storageBucket: '',
    messagingSenderId: 'xxx'
  }
};

2.3 Setup @NgModule

import { AppRoutingModule } from './app-routing.module';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';

import { environment } from '../environments/environment';
import { AppComponent } from './app.component';

import { CustomersListComponent } from './customers/customers-list/customers-list.component';
import { CustomerDetailsComponent } from './customers/customer-details/customer-details.component';
import { CreateCustomerComponent } from './customers/create-customer/create-customer.component';

import { CustomerService } from './customers/customer.service';

@NgModule({
  declarations: [
    AppComponent,
    CustomersListComponent,
    CustomerDetailsComponent,
    CreateCustomerComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule, // for database
  ],
  providers: [CustomerService],
  bootstrap: [AppComponent]
})

export class AppModule { }

2.4 Model Class

export class Customer {
  key: string;
  name: string;
  age: number;
  active = true;
}

2.5 Service

import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { Customer } from './customer';
import { QueryFn } from 'angularfire2/database/interfaces';

@Injectable()
export class CustomerService {

  private dbPath = '/customers';

  customersRef: AngularFireList = null;

  constructor(private db: AngularFireDatabase) {
    this.customersRef = db.list(this.dbPath);
  }

  createCustomer(customer: Customer): void {
    this.customersRef.push(customer);
  }

  updateCustomer(key: string, value: any): void {
    this.customersRef.update(key, value).catch(error => this.handleError(error));
  }

  deleteCustomer(key: string): void {
    this.customersRef.remove(key).catch(error => this.handleError(error));
  }

  getCustomersList(): AngularFireList {
    return this.customersRef;
  }

  deleteAll(): void {
    this.customersRef.remove().catch(error => this.handleError(error));
  }

  private handleError(error) {
    console.log(error);
  }
}

2.6 Customer Details Compoment

import { Component, OnInit, Input } from '@angular/core';

import { CustomerService } from '../customer.service';
import { Customer } from '../customer';

@Component({
  selector: 'customer-details',
  templateUrl: './customer-details.component.html',
  styleUrls: ['./customer-details.component.css']
})
export class CustomerDetailsComponent implements OnInit {

  @Input() customer: Customer;

  constructor(private customerService: CustomerService) { }

  ngOnInit() {
  }

  updateActive(isActive: boolean) {
    this.customerService.updateCustomer(this.customer.key, { active: isActive });
  }

  deleteCustomer() {
    this.customerService.deleteCustomer(this.customer.key);
  }

}

customer-details.component.html:

	

		First Name:  {{customer.name}}
	
	

		Age:  {{customer.age}}
	
	

		Active:  {{customer.active}}
	

	Inactive
	
	Active

	Delete
	
	

2.7 Customers List Component

import { Component, OnInit } from '@angular/core';

import { CustomerService } from '../customer.service';
import { Customer } from '../customer';

@Component({
  selector: 'customers-list',
  templateUrl: './customers-list.component.html',
  styleUrls: ['./customers-list.component.css']
})
export class CustomersListComponent implements OnInit {

  customers: any;

  constructor(private customerService: CustomerService) { }

  ngOnInit() {
    this.getCustomersList();
  }

  getCustomersList() {
    // Use snapshotChanges().map() to store the key
    this.customerService.getCustomersList().snapshotChanges().map(changes => {
      return changes.map(c => ({ key: c.payload.key, ...c.payload.val() }));
    }).subscribe(customers => {
      this.customers = customers;
    });
  }

  deleteCustomers() {
    this.customerService.deleteAll();
  }
}

customers-list.component.html:

Customers

	


	Delete All

2.8 Create Customer Component

import {Component, OnInit} from '@angular/core';
import {FormsModule} from '@angular/forms';

import {Customer} from '../customer';
import {CustomerService} from '../customer.service';

@Component({
  selector: 'create-customer',
  templateUrl: './create-customer.component.html',
  styleUrls: ['./create-customer.component.css']
})
export class CreateCustomerComponent implements OnInit {

  customer: Customer = new Customer();
  submitted = false;

  constructor(private customerService: CustomerService) {}

  ngOnInit() {
  }

  newCustomer(): void {
    this.submitted = false;
    this.customer = new Customer();
  }

  save() {
    this.customerService.createCustomer(this.customer);
    this.customer = new Customer();
  }

  onSubmit() {
    this.submitted = true;
    this.save();
  }
}

create-customer.component.html:

Create Customer

	

		

			Name 
		

		

			Age 
		

		Submit
	



	
You submitted successfully!
	Add

2.9 Routing Module

import { CreateCustomerComponent } from './customers/create-customer/create-customer.component';
import { CustomersListComponent } from './customers/customers-list/customers-list.component';

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: '', redirectTo: 'customers', pathMatch: 'full' },
  { path: 'customers', component: CustomersListComponent },
  { path: 'add', component: CreateCustomerComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export class AppRoutingModule { }

app.component.html:

  

    
{{title}}
    
{{description}}
  

  
  

To understand how to use Angular Routing Module, please visit:
How to work with Angular Routing – Spring Boot + Angular 4

3. Check Result

– Open browser with url http://localhost:4200/.

– Add Customer:

– View Customers and change Active Status:

>> Firebase Console:

– Delete a Customer:

– Delete all Customers:

>> Firebase Console is clean now.

III. Source Code

Angular5FirebaseCRUD

Last updated on November 29, 2018.