Angular 8 Firebase CRUD operations with @angular/fire

angular-8-firebase-tutorial-crud-angular-fire-feature-image

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

angular-8-firebase-crud-realtime-database-app

Project Structure

angular-8-firebase-crud-realtime-database-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

Setup @NgModule

app.module.ts

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

import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { environment } from '../environments/environment';

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

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

customer.ts

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

The key field is important for updating item.

Create Data Service

customer.service.ts

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

@Injectable({
  providedIn: 'root'
})
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): Promise {
    return this.customersRef.update(key, value);
  }

  deleteCustomer(key: string): Promise {
    return this.customersRef.remove(key);
  }

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

  deleteAll(): Promise {
    return this.customersRef.remove();
  }
}
Create Component for item Details

customer-details.component.ts

import { Component, OnInit, Input } from '@angular/core';
import { CustomerService } from '../customer.service';
import { Customer } from '../customer';

@Component({
  selector: 'app-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 })
      .catch(err => console.log(err));
  }

  deleteCustomer() {
    this.customerService
      .deleteCustomer(this.customer.key)
      .catch(err => console.log(err));
  }

}

customer-details.component.html

{{customer.name}}
{{customer.age}}
{{customer.active}}
Inactive Active Delete
Create Component to show List of Items

customers-list.component.ts

import { Component, OnInit } from '@angular/core';
import { CustomerService } from '../customer.service';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-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() {
    this.customerService.getCustomersList().snapshotChanges().pipe(
      map(changes =>
        changes.map(c =>
          ({ key: c.payload.key, ...c.payload.val() })
        )
      )
    ).subscribe(customers => {
      this.customers = customers;
    });
  }

  deleteCustomers() {
    this.customerService.deleteAll().catch(err => console.log(err));
  }

}

In the code above, we use snapshotChanges() with RxJS map() operator to get the key (Firebase id) of each item.

customers-list.component.html:

Customers

We pass each customer item data to customer-details component.

Create Component to save item

create-customer.component.ts

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

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

@Component({
  selector: 'app-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

You submitted successfully!

Define App Routing Module

app-routing.module.ts

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

Run & Check Result

– Run Angular App with command: npm start.
– Open browser with url http://localhost:4200/.

angular-8-firebase-crud-realtime-database-demo-app

Source Code

Angular8FirebaseCRUD



By grokonez | April 24, 2019.


Related Posts


3 thoughts on “Angular 8 Firebase CRUD operations with @angular/fire”

  1. Error in deleting particular customer and activating a particular customer.

    updateActive(isActive: boolean) {
    this.customerService
    .updateCustomer(this.customer.key, { active: isActive })
    .catch(err => console.log(this.customer.key+”%%%”+err));
    }

    deleteCustomer() {

    alert(this.customer.name);

    this.customerService
    .deleteCustomer(this.customer.key)
    .catch(err => console.log(this.customer.key+”%%%”+err));
    }

    both methods doesn’t work because THIS.CUSTOMER.KEY doesn’t returns a key instead of key it returns a object.
    But other attributes like THIS.CUSTOMER.NAME returns correct value.

    Kindly help me in this

Got Something To Say:

Your email address will not be published. Required fields are marked *

*