Angular 5 Firebase CRUD operations with AngularFire2 v5

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.

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<any>;
// db: AngularFireDatabase
this.item = db.object('item').valueChanges();

item: FirebaseObjectObservable<any>;

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

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

// db: AngularFireDatabase

const itemRef = db.object('item');

itemRef.update({ url: 'grokonez.com'});

2.4 Delete

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

// 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<any[]>;
// db: AngularFireDatabase
this.items = db.list('items').valueChanges();

items: Observable<any[]>;

// 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<any[]>;
// db: AngularFireDatabase
this.items = db.list('items').snapshotChanges();

items: Observable<any[]>;

// db: AngularFireDatabase

this.items = db.list('items').snapshotChanges();

3.2 Create

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

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

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

// 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

angular-5-firebase-crud-goal

1.2 Structure

angular-5-firebase-crud-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'
  }
};

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

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;
}

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<Customer> = 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<Customer> {
    return this.customersRef;
  }

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

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

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<Customer> = 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<Customer> {

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

}

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:

<div *ngIf="customer">
	<div>
		<label>First Name: </label> {{customer.name}}
	</div>
	<div>
		<label>Age: </label> {{customer.age}}
	</div>
	<div>
		<label>Active: </label> {{customer.active}}
	</div>

	<span class="button is-small btn-primary" *ngIf='customer.active' (click)='updateActive(false)'>Inactive</span>
	
	<span class="button is-small btn-primary" *ngIf='!customer.active' (click)='updateActive(true)'>Active</span>

	<span class="button is-small btn-danger" (click)='deleteCustomer()'>Delete</span>
	
	<hr/>
</div>

<div>

<label>First Name: </label> {{customer.name}}

</div>

<div>

<label>Age: </label> {{customer.age}}

</div>

<div>

<label>Active: </label> {{customer.active}}

</div>

<span class="button is-small btn-primary" *ngIf='customer.active' (click)='updateActive(false)'>Inactive</span>

<span class="button is-small btn-primary" *ngIf='!customer.active' (click)='updateActive(true)'>Active</span>

<span class="button is-small btn-danger" (click)='deleteCustomer()'>Delete</span>

<hr/>

</div>

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

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:

<h1>Customers</h1>
<div *ngFor="let customer of customers" style="width: 300px;">
	<customer-details [customer]='customer'></customer-details>
</div>
<div style="margin-top:20px;">
	<button type="button" class="button btn-danger" (click)='deleteCustomers()'>Delete All</button>
</div>

<h1>Customers</h1>

<customer-details [customer]='customer'></customer-details>

</div>

<button type="button" class="button btn-danger" (click)='deleteCustomers()'>Delete All</button>

</div>

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

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:

<h3>Create Customer</h3>
<div [hidden]="submitted" style="width: 300px;">
	<form (ngSubmit)="onSubmit()">
		<div class="form-group">
			<label for="name">Name</label> <input type="text"
				class="form-control" id="name" required [(ngModel)]="customer.name"
				name="name">
		</div>

		<div class="form-group">
			<label for="age">Age</label> <input type="text"
				class="form-control" id="age" required [(ngModel)]="customer.age"
				name="age">
		</div>

		<button type="submit" class="btn btn-success">Submit</button>
	</form>
</div>

<div [hidden]="!submitted">
	<h4>You submitted successfully!</h4>
	<button class="btn btn-success" (click)="newCustomer()">Add</button>
</div>

<h3>Create Customer</h3>

<label for="name">Name</label> <input type="text"

class="form-control" id="name" required [(ngModel)]="customer.name"

name="name">

</div>

<label for="age">Age</label> <input type="text"

class="form-control" id="age" required [(ngModel)]="customer.age"

name="age">

</div>

<button type="submit" class="btn btn-success">Submit</button>

</form>

</div>

<h4>You submitted successfully!</h4>

</div>

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

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:

<div class="container-fluid">
  <div style="color: blue;">
    <h1>{{title}}</h1>
    <h3>{{description}}</h3>
  </div>

  <nav>
    <a routerLink="customers" class="btn btn-primary active" role="button" routerLinkActive="active">Customers</a>
    <a routerLink="add" class="btn btn-primary active" role="button" routerLinkActive="active">Add</a>
  </nav>
  <router-outlet></router-outlet>
</div>

<h1>{{title}}</h1>

<h3>{{description}}</h3>

</div>

<nav>

<a routerLink="customers" class="btn btn-primary active" role="button" routerLinkActive="active">Customers</a>

</nav>

<router-outlet></router-outlet>

</div>

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:
angular-5-firebase-crud-result-add-customer

– View Customers and change Active Status:
angular-5-firebase-crud-result-update-customer

>> Firebase Console:
angular-5-firebase-crud-result-console-customer

– Delete a Customer:
angular-5-firebase-crud-result-delete-customer

– Delete all Customers:
angular-5-firebase-crud-result-delete-all-customer

>> Firebase Console is clean now.

III. Source Code

Angular5FirebaseCRUD

By grokonez | February 17, 2018.

Last updated on June 18, 2018.

Post Tags

10 thoughts on “Angular 5 Firebase CRUD operations with AngularFire2 v5”

Serg says:

February 19, 2018 at 12:16 pm

Add source code link, please.

Reply
1. JavaSampleApproach says:
  
  February 19, 2018 at 3:44 pm
  
  Hi Serg,
  
  Here you are 🙂
  Angular5FirebaseCRUD
  
  Regards,
  JSA.
  
  Reply
Jack Stepanyan says:

February 27, 2018 at 2:44 pm

Thank you for this tutorial. I was trying to find the right tutorial for angular 5, and this was it. I had problems with other tutorials as they were using angular 4 which in this case could be problematic.

Reply
Fernando J says:

March 22, 2018 at 8:29 pm

hi, i’m new with angular+firebase.
how can i get a single object from database and show it in html?
thanks 🙂

Reply
1. Rajan Bhadauria says:
  
  July 19, 2018 at 3:08 pm
  
  this.db.object(‘/users/’+ uid);
  
  Reply
Cuauhtémoc says:

May 28, 2018 at 4:27 am

I’m getting an error when I’m using customerService.getCustomersList()

Uncaught TypeError: Object(…) is not a function
at SwitchMapSubscriber.eval [as project] (changes.js:7)
at SwitchMapSubscriber._next (switchMap.js:91)
at SwitchMapSubscriber.Subscriber.next (Subscriber.js:95)
at RefCountSubscriber.Subscriber._next (Subscriber.js:131)
at RefCountSubscriber.Subscriber.next (Subscriber.js:95)
at Subject.next (Subject.js:56)
at ConnectableSubscriber.Subscriber._next (Subscriber.js:131)
at ConnectableSubscriber.Subscriber.next (Subscriber.js:95)
at Notification.observe (Notification.js:32)
at AsyncAction.DelaySubscriber.dispatch (delay.js:91)

Any idea how to fix this?

Reply
Rodrigo says:

June 1, 2018 at 3:42 pm

I’m getting he same error when I’m using customerService.getCustomersList()

Uncaught TypeError: Object(…) is not a function
at SwitchMapSubscriber.eval [as project] (changes.js:7)
at SwitchMapSubscriber._next (switchMap.js:91)
at SwitchMapSubscriber.Subscriber.next (Subscriber.js:95)
at RefCountSubscriber.Subscriber._next (Subscriber.js:131)
at RefCountSubscriber.Subscriber.next (Subscriber.js:95)
at Subject.next (Subject.js:56)
at ConnectableSubscriber.Subscriber._next (Subscriber.js:131)
at ConnectableSubscriber.Subscriber.next (Subscriber.js:95)
at Notification.observe (Notification.js:32)
at AsyncAction.DelaySubscriber.dispatch (delay.js:91)

Any idea how to fix this?

Reply
1. Rajan Bhadauria says:
  
  July 19, 2018 at 3:12 pm
  
  You can do like this
  subscribe(abc=>{
  }).unsubscribe()
  
  Reply
Gospel Darlington says:

June 19, 2018 at 5:01 pm

Hello Sir,

I have been following your tutorials and i have absolutely found them updated to
the latest versions of angular and they work.

My question is about how to unsubscribe from a firebase list data.

I would like to unsubscribe from it once i finish adding data to an array.

Reply
1. Rajan Bhadauria says:
  
  July 19, 2018 at 3:13 pm
  
  You can do like this
  subscribe(abc=>{
  }).unsubscribe()
  
  Reply

I. Technology

II. How to do

1. Set up the Firebase Project & Install AngularFire2

2. Object

2.1 Create an object binding/ Retrieve

2.2 Create

2.3 Update

2.4 Delete

3. List of Objects

3.1 Create a list binding/ Retrieve

3.2 Create

3.3 Update

3.4 Delete

III. Practice

1. Project Overview

1.1 Goal

1.2 Structure

2. Step by step

2.1 Set up the Firebase Project & Install AngularFire2

2.2 Add Firebase config to environments variable

2.3 Setup @NgModule

2.4 Model Class

2.5 Service

2.6 Customer Details Compoment

2.7 Customers List Component

2.8 Create Customer Component

2.9 Routing Module

3. Check Result

III. Source Code

Related Posts

Post Tags

10 thoughts on “Angular 5 Firebase CRUD operations with AngularFire2 v5”

Got Something To Say: Cancel reply