Angular 9 CRUD operation Using Firebase

 Introduction

 

In this article, we are going to learn how to do CRUD operations in Angular applications with Firebase 'RealTime Database' and ' Cloud Firestore'.

 

What is CRUD ?

 

CRUD is an acronym for CREATE, READ, UPDATE, DELETE.

 

What is Firebase ?

 

Firebase is a technology that allows us to create web applications without server-side-programming, making development faster and easier. It can control data without thinking about how data is stored and synchronized across different instances of the application in real-time.

 

It is a mobile platform from Google offering a number of different features.These features allow users to save and retrieve data to be accessed from any device or browser.

 

Prerequisites

• Basic knowledge of Angular
• Visual Studio Code must be installed
• Angular CLI must be installed
• Node JS must be installed
• Basic Knowledge of Firebase

Step 1

 

Let's create a new Angular project using the following NPM command.

 

Open cmd and and type the following command.

ng new angularCRUD-using-firebase

 

 

Step 2

 

In cmd go to the project folder and type 'code .' to open the project in Visual Studio code .

 

Step 3

 

Now, let's create a new component by using the following command and nstall Firebase and Angular Firebase.

npm install firebase @angular/fire

Step 4

 

To integrate our Angular application with Firebase just visit my article Introduction to Firebase. There I explained in detail how to create an account in Firebase and how to setup the project .

• Introduction To Firebase 

Go to Firebase and login in console.firebase.com

 

On the left menu of the home page Click on Project overview.  Go to Settings. On the general tab, scroll down and you can see your configuration.You only need to copy the config object from this page.

 

 

Step 5

 

Copy the configuration and paste it inside your enviroment.ts file 

 

 

Step 6

 

Go to environment.ts file and paste your firebase configuration code inside firebase:{} (You need to create one object)

 

 

Step 7

 

Open the file app.module.ts and paste the below code,

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { environment } from 'src/environments/environment';
import { RealTimeDatabaseComponent } from './real-time-database/real-time-database.component';
import { CloudFirestoreComponent } from './cloud-firestore/cloud-firestore.component';

@NgModule({
  declarations: [
    AppComponent,
    RealTimeDatabaseComponent,
    CloudFirestoreComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule,
    AngularFirestoreModule
  ],
  providers: [AngularFireModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

 

The above image shows that we need to import Angular fire module and inside initializeapp and give the path of our firebase web configuration. Also we have imported 2 files ,Angular Fire database module for Realtime Database and Angular FireStore module for Cloud Firestore.

 

Step 8

 

There are two ways to store our data in firebase 

1. Cloud Firestore- Store and sync data in real time across all connected clients
2. Real-Time Database- Realtime Updates poweful queries and automatic scaling

In this article we are storing data in both ways to store data in Cloud Firestore and in Real-time Database.

 

Using Cloud Firestore

 

Step 9

 

Create a component "cloud -firestore" using the following command 

ng g c cloud-firestore

Step 10 

 

Now, open the cloud-firestore.component.ts file and add the following code in this file,

import { Component, OnInit } from '@angular/core';
import { Country } from '../country';
import { CountryService } from '../country.service';
import { AngularFirestore } from '@angular/fire/firestore';

@Component({
  selector: 'app-cloud-firestore',
  templateUrl: './cloud-firestore.component.html',
  styleUrls: ['./cloud-firestore.component.css']
})
export class CloudFirestoreComponent {
  updateCountry: boolean = false;
  countries: Country[];
  Country: Country = new Country();

  countryId = null;
  isToggle: boolean = false;
  formSubmitted: boolean;
  isDelete: boolean;

  constructor(private _countryService: CountryService,
    private angularFirestore: AngularFirestore
  ) {
    this.getAllCountry();
  }

  getAllCountry() {
    this._countryService.getAllCountry().subscribe((data: any) => {
      this.countries = data.map(e => {
        return {
          id: e.payload.doc.id,
          ...e.payload.doc.data()
        } as Country;
      });
      console.log(this.countries);

    });
  }

  onSubmit(f) {
    if (f.form.valid) {
      const CountryData = JSON.parse(JSON.stringify(this.Country));
      debugger;
      if (this.countryId == null) {
        this._countryService.addCountryInforamtion(CountryData);
      } else {
        this._countryService.updateCountryInforamtion(this.countryId, CountryData);
      }
      this.Country = new Country();
      f.submitted = false;
      this.formSubmitted = true;
      this.updateCountry = false;
      setInterval(() => {
        this.formSubmitted = false;

      }, 2000);
    }
  }

  //Edit Country method
  editCountry(countryId) {
    this.countryId = countryId;
    let obj: any = this.countries.filter((x: any) => {
      return x.id == countryId;
    });
    this.updateCountry = true;
    this.Country = obj[0];
  }

  // Delete Country method
  deleteCountry(countryId) {
    if (confirm('Please note! This action can NOT be undone. Are you sure you want to delete?')) {

      this._countryService.deleteCountry(countryId);
      this.isDelete = true;
      setInterval(() => {
        this.isDelete = false;
      }, 2000);
    }
  }

}

Step 11

 

Open the cloud-firestore.component.html file and add the following code in this file,

<div class="card">
    <form name="form" (ngSubmit)=" onSubmit(f)" #f="ngForm" novalidate>
        <div class="card-body pb-0">
            <div class="card">
                <div class="card-header main-search dash-search">
                    <h1 style="text-align: center;">
                        MANAGE COUNTRY- Using Cloud Firestore
                    </h1>
                </div>
            </div>
            <div class="row">
                <div class="col-12 col-md-12">
                    <div class="card">
                        <div *ngIf="!updateCountry" class="card-header">
                            Add New Country
                            <h3 *ngIf="formSubmitted" style="text-align: center; color: green;">New Country has been
                                added
                                successfully...</h3>
                            <h3 *ngIf="isDelete" style="text-align: center; color: green;">Country has been deleted
                                successfully...</h3>
                        </div>

                        <div *ngIf="updateCountry" class="card-header">
                            Update Country
                            <h3 *ngIf="formSubmitted" style="text-align: center; color: green;">Existing Country has
                                been updated
                                successfully...</h3>
                        </div>

                        <div class="card-body">
                            <div class="center-form">
                                <div class="row">
                                    <div class="col-12 col-md-6">
                                        <div class="form-group">
                                            <label class="col-form-label">Name<span
                                                    class="mandatoryFieldColor">*</span></label>
                                            <input type="text" class="form-control" name="CountryName" autofocus
                                                [(ngModel)]="Country.CountryName" #country="ngModel"
                                                [ngClass]="{ 'is-invalid': f.submitted && country.invalid }" required />
                                            <div *ngIf="f.submitted && country.invalid" class="invalid-feedback">
                                                <div *ngIf="country.errors.required || country.pristine==false">Country
                                                    Name is required</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div class="form-group">
                                            <label class="col-form-label">Country short name<span
                                                    class="mandatoryFieldColor">*</span></label>
                                            <input type="text" class="form-control" name="CountryShortName"
                                                [(ngModel)]="Country.CountryShortName" #countryShortName="ngModel"
                                                [ngClass]="{ 'is-invalid': f.submitted && countryShortName.invalid }"
                                                required />
                                            <div *ngIf="f.submitted && countryShortName.invalid"
                                                class="invalid-feedback">
                                                <div
                                                    *ngIf="countryShortName.errors.required || countryShortName.pristine==false">
                                                    Country Short
                                                    Name is required</div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-12 col-md-6">
                                        <div class="form-group">
                                            <label class="col-form-label">Currency name<span
                                                    class="mandatoryFieldColor">*</span></label>
                                            <input type="text" class="form-control" name="Currency"
                                                [(ngModel)]="Country.Currency" #currencyName="ngModel"
                                                [ngClass]="{ 'is-invalid': f.submitted && currencyName.invalid }"
                                                required />
                                            <div *ngIf="f.submitted && currencyName.invalid" class="invalid-feedback">
                                                <div
                                                    *ngIf="currencyName.errors.required || currencyName.pristine==false">
                                                    Currency Name is
                                                    required</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div class="form-group">
                                            <label class="col-form-label">Currency short name<span
                                                    class="mandatoryFieldColor">*</span></label>
                                            <input type="text" class="form-control" name="CurrencyShortName"
                                                [(ngModel)]="Country.CurrencyShortName" #currencyShortName="ngModel"
                                                [ngClass]="{ 'is-invalid': f.submitted && currencyShortName.invalid }"
                                                required />
                                            <div *ngIf="f.submitted && currencyShortName.invalid"
                                                class="invalid-feedback">
                                                <div
                                                    *ngIf="currencyShortName.errors.required || currencyShortName.pristine==false">
                                                    Currency
                                                    Short Name is required</div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-12 col-md-12">
                                        <div class="btn-group mb-3 mt-2 cmn-btn-grp">
                                            <button *ngIf="!updateCountry" type="submit" style="margin-left:1px"
                                                class="btn btn-success">Add
                                                Country</button>
                                            <button *ngIf="updateCountry" type="submit" style="margin-left:1px"
                                                class="btn btn-success">Update
                                                Country</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md-12">
                    <div class="card">
                        <div class="card-header">Country Management</div>
                        <div class="card-body position-relative">
                            <div class="table-responsive cnstr-record product-tbl">
                                <table class="table table-bordered heading-hvr">
                                    <thead>
                                        <tr>
                                            <th class="active">Country Name</th>
                                            <th>Short name</th>
                                            <th>Currency name</th>
                                            <th>Currency short name</th>
                                            <th width="60"> </th>
                                            <th width="60"> </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr *ngFor="let countryList of countries">
                                            <td>{{countryList.CountryName}}</td>
                                            <td>{{countryList.CountryShortName | uppercase}}</td>
                                            <td>{{countryList.Currency}}</td>
                                            <td>{{countryList.CurrencyShortName | uppercase}}</td>
                                            <td class="case-record">
                                                <button type="button" class="btn btn-info"
                                                    (click)="editCountry(countryList.id)">Edit</button>

                                            </td>
                                            <td> <button type="button" class="btn btn-danger"
                                                    (click)="deleteCountry(countryList.id)">Delete</button></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </form>
</div>

Step 12

 

Open the app.component.html file and add the following code in this file,

<app-cloud-firestore></app-cloud-firestore>

Step 13

 

Create a class "country.ts" and paste the code:

ng g class country

export class Country {
    CountryName: string;
    CountryShortName: string;
    Currency: string;
    CurrencyShortName: string;
}

Step 14

 

Create one service "countryService" 

ng g s country

 Paste the following code in country service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { AngularFirestore } from '@angular/fire/firestore';

@Injectable({
  providedIn: 'root'
})
export class CountryService {

  constructor(public http: HttpClient, private angularFirestore: AngularFirestore) {
  }

  getAllCountry() {
    return this.angularFirestore.collection('Country').snapshotChanges();
  }

  //Adding new Country
  addCountryInforamtion(countryInfo) {
    return this.angularFirestore.collection('Country').add(countryInfo);
  }
  //Update Existing Country
  updateCountryInforamtion(countryid, countryInfo) {
    delete countryInfo.id;
    this.angularFirestore.doc('Country/' + countryid).update(countryInfo);
  }

  //Delete Country
  deleteCountry(id) {
    this.angularFirestore.doc('Country/' + id).delete();
  }
}

To add data in Cloud Firestore we use .collection and .add()

 

To edit data in Cloud Firestore we use .doc(id) and .update()

 

To get data from Cloud Firestore we use .collection and .snapshotChanges()

 

To Delete data from Cloud Firestore we use .doc(id) and .delete()

 

 Now the coding part is done for storing data in cloud firestore

 

Time to see its output

 

Cloud Firestore Add 

 

 

Cloud Firestore Edit

 

 

Cloud Firestore Delete

 

 

 

Storing data in firestore

 

Using Real-Time Database

 

Step 15

 

Create a component "real-time-database" using the following command:

ng g c real-time-database

Step 16

 

Now, open the real-time-database.component.ts file and add the following code in this file,

import { Component, OnInit } from '@angular/core';
import { Country } from '../country';
import { CountryService } from '../country.service';
import { AngularFireDatabase, AngularFireList } from '@angular/fire/database/database';

@Component({
  selector: 'app-real-time-database',
  templateUrl: './real-time-database.component.html',
  styleUrls: ['./real-time-database.component.css']
})
export class RealTimeDatabaseComponent {
  updateCountry: boolean = false;
  countries: Country[];
  Country: Country = new Country();

  countryId = null;
  isToggle: boolean = false;
  formSubmitted: boolean;
  isDelete: boolean;

  CountryList: AngularFireList<any>;

  constructor(private _countryService: CountryService,
    private angularFireDatabase: AngularFireDatabase
  ) {
    this.getAllCountry();
  }

  getAllCountry() {
    this.CountryList = this.angularFireDatabase.list('Country');
    this.CountryList.snapshotChanges().subscribe((data: any) => {
      this.countries = data.map(e => {
        return {
          id: e.payload.key,
          ...e.payload.val()
        } as Country;
      });
      console.log(this.countries);
    });

  }

  onSubmit(f) {
    if (f.form.valid) {

      if (this.countryId == null) {
        this.CountryList.push({
          CountryName: this.Country.CountryName,
          CountryShortName: this.Country.CountryShortName,
          Currency: this.Country.Currency,
          CurrencyShortName: this.Country.CurrencyShortName
        })

      } else {
        this.CountryList.update(this.countryId, {
          CountryName: this.Country.CountryName,
          CountryShortName: this.Country.CountryShortName,
          Currency: this.Country.Currency,
          CurrencyShortName: this.Country.CurrencyShortName
        })
      }
      this.Country = new Country();
      f.submitted = false;
      this.formSubmitted = true;
      this.updateCountry = false;
      setInterval(() => {
        this.formSubmitted = false;
      }, 2000);
    }
  }

  //Edit Country method
  editCountry(countryId) {
    this.countryId = countryId;
    let obj: any = this.countries.filter((x: any) => {
      return x.id == countryId;
    });
    this.updateCountry = true;
    this.Country = obj[0];
  }

  // Delete Country method
  deleteCountry(countryId) {
    if (confirm('Please note! This action can NOT be undone. Are you sure you want to delete?')) {

      this.CountryList.remove(countryId);
      this.isDelete = true;
      setInterval(() => {
        this.isDelete = false;
      }, 2000);
    }
  }

}

To add data in Real-time database we use parameter which is of type AngularDatabaseList and .push method

 

To edit data in Real-time database we use parameter which is of type AngularDatabaseList and .update() method

 

To get data from Real-time database we use .list()

 

To delete data from Real-time database we use parameter which is of type AngularDatabaseList and .remove()

 

Step 11

 

Open the real-time-database.component.html file and add the following code in this file,

<div class="card">
    <form name="form" (ngSubmit)=" onSubmit(f)" #f="ngForm" novalidate>
        <div class="card-body pb-0">
            <div class="card">
                <div class="card-header main-search dash-search">
                    <h1 style="text-align: center;">
                        MANAGE COUNTRY-Using Real-time Database
                    </h1>
                </div>
            </div>
            <div class="row">
                <div class="col-12 col-md-12">
                    <div class="card">
                        <div *ngIf="!updateCountry" class="card-header">
                            Add New Country
                            <h3 *ngIf="formSubmitted" style="text-align: center; color: green;">New Country has been
                                added
                                successfully...</h3>
                            <h3 *ngIf="isDelete" style="text-align: center; color: green;">Country has been deleted
                                successfully...</h3>
                        </div>

                        <div *ngIf="updateCountry" class="card-header">
                            Update Country
                            <h3 *ngIf="formSubmitted" style="text-align: center; color: green;">Existing Country has
                                been updated
                                successfully...</h3>
                        </div>

                        <div class="card-body">
                            <div class="center-form">
                                <div class="row">
                                    <div class="col-12 col-md-6">
                                        <div class="form-group">
                                            <label class="col-form-label">Name<span
                                                    class="mandatoryFieldColor">*</span></label>
                                            <input type="text" class="form-control" name="CountryName" autofocus
                                                [(ngModel)]="Country.CountryName" #country="ngModel"
                                                [ngClass]="{ 'is-invalid': f.submitted && country.invalid }" required />
                                            <div *ngIf="f.submitted && country.invalid" class="invalid-feedback">
                                                <div *ngIf="country.errors.required || country.pristine==false">Country
                                                    Name is required</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div class="form-group">
                                            <label class="col-form-label">Country short name<span
                                                    class="mandatoryFieldColor">*</span></label>
                                            <input type="text" class="form-control" name="CountryShortName"
                                                [(ngModel)]="Country.CountryShortName" #countryShortName="ngModel"
                                                [ngClass]="{ 'is-invalid': f.submitted && countryShortName.invalid }"
                                                required />
                                            <div *ngIf="f.submitted && countryShortName.invalid"
                                                class="invalid-feedback">
                                                <div
                                                    *ngIf="countryShortName.errors.required || countryShortName.pristine==false">
                                                    Country Short
                                                    Name is required</div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-12 col-md-6">
                                        <div class="form-group">
                                            <label class="col-form-label">Currency name<span
                                                    class="mandatoryFieldColor">*</span></label>
                                            <input type="text" class="form-control" name="Currency"
                                                [(ngModel)]="Country.Currency" #currencyName="ngModel"
                                                [ngClass]="{ 'is-invalid': f.submitted && currencyName.invalid }"
                                                required />
                                            <div *ngIf="f.submitted && currencyName.invalid" class="invalid-feedback">
                                                <div
                                                    *ngIf="currencyName.errors.required || currencyName.pristine==false">
                                                    Currency Name is
                                                    required</div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-12 col-md-6">
                                        <div class="form-group">
                                            <label class="col-form-label">Currency short name<span
                                                    class="mandatoryFieldColor">*</span></label>
                                            <input type="text" class="form-control" name="CurrencyShortName"
                                                [(ngModel)]="Country.CurrencyShortName" #currencyShortName="ngModel"
                                                [ngClass]="{ 'is-invalid': f.submitted && currencyShortName.invalid }"
                                                required />
                                            <div *ngIf="f.submitted && currencyShortName.invalid"
                                                class="invalid-feedback">
                                                <div
                                                    *ngIf="currencyShortName.errors.required || currencyShortName.pristine==false">
                                                    Currency
                                                    Short Name is required</div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-12 col-md-12">
                                        <div class="btn-group mb-3 mt-2 cmn-btn-grp">
                                            <button *ngIf="!updateCountry" type="submit" style="margin-left:1px"
                                                class="btn btn-success">Add
                                                Country</button>
                                            <button *ngIf="updateCountry" type="submit" style="margin-left:1px"
                                                class="btn btn-success">Update
                                                Country</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md-12">
                    <div class="card">
                        <div class="card-header">Country Management</div>
                        <div class="card-body position-relative">
                            <div class="table-responsive cnstr-record product-tbl">
                                <table class="table table-bordered heading-hvr">
                                    <thead>
                                        <tr>
                                            <th class="active">Country Name</th>
                                            <th>Short name</th>
                                            <th>Currency name</th>
                                            <th>Currency short name</th>
                                            <th width="60"> </th>
                                            <th width="60"> </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr *ngFor="let countryList of countries">
                                            <td>{{countryList.CountryName}}</td>
                                            <td>{{countryList.CountryShortName | uppercase}}</td>
                                            <td>{{countryList.Currency}}</td>
                                            <td>{{countryList.CurrencyShortName | uppercase}}</td>
                                            <td class="case-record">
                                                <button type="button" class="btn btn-info"
                                                    (click)="editCountry(countryList.id)">Edit</button>

                                            </td>
                                            <td> <button type="button" class="btn btn-danger"
                                                    (click)="deleteCountry(countryList.id)">Delete</button></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </form>
</div>

Step 12

 

Open the app.component.html file and add the following code in this file,

<app-real-time-database></app-real-time-database>

Now it's time to see the output of real time database 

 

Real-time Database Add

 

 

 

Real-time Database Edit 

 

 

 

Real-time Database Delete

 

 

 

Conclusion

 

In this article, we have seen how to perform CRUD operations in Angular 8 with Firebase Cloud Firestore and Real-Time Database.

 

Please give your valuable feedback/comments/questions about this article.