In this tutorial, we’re gonna create a simple Angular 6 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 6 – AngularFire2 V5
– Angular 6 Firebase – Upload/Display/Delete Files from Storage
Contents
I. Technology
– Angular 6
– 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
|
1 2 3 |
item: FirebaseObjectObservable<any>; // db: AngularFireDatabase this.item = db.object('item').valueChanges(); |
2.2 Create
|
1 2 3 4 5 |
// db: AngularFireDatabase const itemRef = db.object('item'); // set() for destructive updates itemRef.set({ name: 'javasampleapproach'}); |
2.3 Update
|
1 2 3 |
// db: AngularFireDatabase const itemRef = db.object('item'); itemRef.update({ url: 'grokonez.com'}); |
2.4 Delete
|
1 2 3 |
// 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:
|
1 2 3 |
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):
|
1 2 3 |
items: Observable<any[]>; // db: AngularFireDatabase this.items = db.list('items').snapshotChanges(); |
3.2 Create
|
1 2 3 |
// db: AngularFireDatabase const itemsRef = db.list('items'); itemsRef.push({ site: 'grokonez.com' }); |
3.3 Update
|
1 2 3 4 5 6 7 8 9 |
// 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
|
1 2 3 4 5 6 |
// 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 6 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:
|
1 2 3 4 5 6 7 8 9 10 11 |
export const environment = { production: false, firebase: { apiKey: 'xxx', authDomain: 'jsa-angular6.firebaseapp.com', databaseURL: 'https://jsa-angular6.firebaseio.com', projectId: 'jsa-angular6', storageBucket: '', messagingSenderId: 'xxx' } }; |
2.3 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
2.4 Setup @NgModule
app.module.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
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 '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'; @NgModule({ declarations: [ AppComponent, CustomersListComponent, CustomerDetailsComponent, CreateCustomerComponent ], imports: [ BrowserModule, FormsModule, AppRoutingModule, AngularFireModule.initializeApp(environment.firebase), AngularFireDatabaseModule, // for database ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } |
2.5 Model Class
customer.ts
|
1 2 3 4 5 6 |
export class Customer { key: string; name: string; age: number; active = true; } |
2.6 Service
customer.service.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
import { Injectable } from '@angular/core'; import { AngularFireDatabase, AngularFireList } from 'angularfire2/database'; import { Customer } from './customer'; @Injectable({ providedIn: 'root' }) 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.7 Customer Details Compoment
customer-details.component.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import { Component, OnInit, Input } from '@angular/core'; import { Customer } from '../customer'; import { CustomerService } from '../customer.service'; @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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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> |
2.8 Customers List Component
customers-list.component.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
import { Component, OnInit } from '@angular/core'; import { map } from 'rxjs/operators'; import { CustomerService } from '../customer.service'; @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().pipe( map(changes => changes.map(c => ({ key: c.payload.key, ...c.payload.val() })) ) ).subscribe(customers => { this.customers = customers; }); } deleteCustomers() { this.customerService.deleteAll(); } } |
customers-list.component.html:
|
1 2 3 4 5 6 7 |
<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> |
2.9 Create Customer Component
create-customer.component.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<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> |
2.10 Routing Module
app-routing.module.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<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> |
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.
Please do a sign in sign up authentication tutorial with firebase angular fire2 v5 and angular 6