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.
  1. 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.
  1. 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 .
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,
  1. import { BrowserModule } from '@angular/platform-browser';  
  2. import { NgModule } from '@angular/core';  
  3. import { AppComponent } from './app.component';  
  4. import { FormsModule } from '@angular/forms';  
  5. import { HttpClientModule } from '@angular/common/http';  
  6. import { AngularFireModule } from '@angular/fire';  
  7. import { AngularFireDatabaseModule } from '@angular/fire/database';  
  8. import { AngularFirestoreModule } from '@angular/fire/firestore';  
  9. import { environment } from 'src/environments/environment';  
  10. import { RealTimeDatabaseComponent } from './real-time-database/real-time-database.component';  
  11. import { CloudFirestoreComponent } from './cloud-firestore/cloud-firestore.component';  
  12.   
  13. @NgModule({  
  14.   declarations: [  
  15.     AppComponent,  
  16.     RealTimeDatabaseComponent,  
  17.     CloudFirestoreComponent  
  18.   ],  
  19.   imports: [  
  20.     BrowserModule,  
  21.     FormsModule,  
  22.     HttpClientModule,  
  23.     AngularFireModule.initializeApp(environment.firebase),  
  24.     AngularFireDatabaseModule,  
  25.     AngularFirestoreModule  
  26.   ],  
  27.   providers: [AngularFireModule],  
  28.   bootstrap: [AppComponent]  
  29. })  
  30. 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 
  1. ng g c cloud-firestore   
Step 10 
 
Now, open the cloud-firestore.component.ts file and add the following code in this file,
  1. import { Component, OnInit } from '@angular/core';  
  2. import { Country } from '../country';  
  3. import { CountryService } from '../country.service';  
  4. import { AngularFirestore } from '@angular/fire/firestore';  
  5.   
  6. @Component({  
  7.   selector: 'app-cloud-firestore',  
  8.   templateUrl: './cloud-firestore.component.html',  
  9.   styleUrls: ['./cloud-firestore.component.css']  
  10. })  
  11. export class CloudFirestoreComponent {  
  12.   updateCountry: boolean = false;  
  13.   countries: Country[];  
  14.   Country: Country = new Country();  
  15.   
  16.   countryId = null;  
  17.   isToggle: boolean = false;  
  18.   formSubmitted: boolean;  
  19.   isDelete: boolean;  
  20.   
  21.   constructor(private _countryService: CountryService,  
  22.     private angularFirestore: AngularFirestore  
  23.   ) {  
  24.     this.getAllCountry();  
  25.   }  
  26.   
  27.   getAllCountry() {  
  28.     this._countryService.getAllCountry().subscribe((data: any) => {  
  29.       this.countries = data.map(e => {  
  30.         return {  
  31.           id: e.payload.doc.id,  
  32.           ...e.payload.doc.data()  
  33.         } as Country;  
  34.       });  
  35.       console.log(this.countries);  
  36.   
  37.     });  
  38.   }  
  39.   
  40.   onSubmit(f) {  
  41.     if (f.form.valid) {  
  42.       const CountryData = JSON.parse(JSON.stringify(this.Country));  
  43.       debugger;  
  44.       if (this.countryId == null) {  
  45.         this._countryService.addCountryInforamtion(CountryData);  
  46.       } else {  
  47.         this._countryService.updateCountryInforamtion(this.countryId, CountryData);  
  48.       }  
  49.       this.Country = new Country();  
  50.       f.submitted = false;  
  51.       this.formSubmitted = true;  
  52.       this.updateCountry = false;  
  53.       setInterval(() => {  
  54.         this.formSubmitted = false;  
  55.   
  56.       }, 2000);  
  57.     }  
  58.   }  
  59.   
  60.   //Edit Country method  
  61.   editCountry(countryId) {  
  62.     this.countryId = countryId;  
  63.     let obj: any = this.countries.filter((x: any) => {  
  64.       return x.id == countryId;  
  65.     });  
  66.     this.updateCountry = true;  
  67.     this.Country = obj[0];  
  68.   }  
  69.   
  70.   // Delete Country method  
  71.   deleteCountry(countryId) {  
  72.     if (confirm('Please note! This action can NOT be undone. Are you sure you want to delete?')) {  
  73.   
  74.       this._countryService.deleteCountry(countryId);  
  75.       this.isDelete = true;  
  76.       setInterval(() => {  
  77.         this.isDelete = false;  
  78.       }, 2000);  
  79.     }  
  80.   }  
  81.   
  82. }  
Step 11
 
Open the cloud-firestore.component.html file and add the following code in this file,
  1. <div class="card">    
  2.     <form name="form" (ngSubmit)=" onSubmit(f)" #f="ngForm" novalidate>    
  3.         <div class="card-body pb-0">    
  4.             <div class="card">    
  5.                 <div class="card-header main-search dash-search">    
  6.                     <h1 style="text-align: center;">    
  7.                         MANAGE COUNTRY- Using Cloud Firestore    
  8.                     </h1>    
  9.                 </div>    
  10.             </div>    
  11.             <div class="row">    
  12.                 <div class="col-12 col-md-12">    
  13.                     <div class="card">    
  14.                         <div *ngIf="!updateCountry" class="card-header">    
  15.                             Add New Country    
  16.                             <h3 *ngIf="formSubmitted" style="text-align: center; color: green;">New Country has been    
  17.                                 added    
  18.                                 successfully...</h3>    
  19.                             <h3 *ngIf="isDelete" style="text-align: center; color: green;">Country has been deleted    
  20.                                 successfully...</h3>    
  21.                         </div>    
  22.     
  23.                         <div *ngIf="updateCountry" class="card-header">    
  24.                             Update Country    
  25.                             <h3 *ngIf="formSubmitted" style="text-align: center; color: green;">Existing Country has    
  26.                                 been updated    
  27.                                 successfully...</h3>    
  28.                         </div>    
  29.     
  30.                         <div class="card-body">    
  31.                             <div class="center-form">    
  32.                                 <div class="row">    
  33.                                     <div class="col-12 col-md-6">    
  34.                                         <div class="form-group">    
  35.                                             <label class="col-form-label">Name<span    
  36.                                                     class="mandatoryFieldColor">*</span></label>    
  37.                                             <input type="text" class="form-control" name="CountryName" autofocus    
  38.                                                 [(ngModel)]="Country.CountryName" #country="ngModel"    
  39.                                                 [ngClass]="{ 'is-invalid': f.submitted && country.invalid }" required />    
  40.                                             <div *ngIf="f.submitted && country.invalid" class="invalid-feedback">    
  41.                                                 <div *ngIf="country.errors.required || country.pristine==false">Country    
  42.                                                     Name is required</div>    
  43.                                             </div>    
  44.                                         </div>    
  45.                                     </div>    
  46.                                     <div class="col-12 col-md-6">    
  47.                                         <div class="form-group">    
  48.                                             <label class="col-form-label">Country short name<span    
  49.                                                     class="mandatoryFieldColor">*</span></label>    
  50.                                             <input type="text" class="form-control" name="CountryShortName"    
  51.                                                 [(ngModel)]="Country.CountryShortName" #countryShortName="ngModel"    
  52.                                                 [ngClass]="{ 'is-invalid': f.submitted && countryShortName.invalid }"    
  53.                                                 required />    
  54.                                             <div *ngIf="f.submitted && countryShortName.invalid"    
  55.                                                 class="invalid-feedback">    
  56.                                                 <div    
  57.                                                     *ngIf="countryShortName.errors.required || countryShortName.pristine==false">    
  58.                                                     Country Short    
  59.                                                     Name is required</div>    
  60.                                             </div>    
  61.                                         </div>    
  62.                                     </div>    
  63.     
  64.                                     <div class="col-12 col-md-6">    
  65.                                         <div class="form-group">    
  66.                                             <label class="col-form-label">Currency name<span    
  67.                                                     class="mandatoryFieldColor">*</span></label>    
  68.                                             <input type="text" class="form-control" name="Currency"    
  69.                                                 [(ngModel)]="Country.Currency" #currencyName="ngModel"    
  70.                                                 [ngClass]="{ 'is-invalid': f.submitted && currencyName.invalid }"    
  71.                                                 required />    
  72.                                             <div *ngIf="f.submitted && currencyName.invalid" class="invalid-feedback">    
  73.                                                 <div    
  74.                                                     *ngIf="currencyName.errors.required || currencyName.pristine==false">    
  75.                                                     Currency Name is    
  76.                                                     required</div>    
  77.                                             </div>    
  78.                                         </div>    
  79.                                     </div>    
  80.                                     <div class="col-12 col-md-6">    
  81.                                         <div class="form-group">    
  82.                                             <label class="col-form-label">Currency short name<span    
  83.                                                     class="mandatoryFieldColor">*</span></label>    
  84.                                             <input type="text" class="form-control" name="CurrencyShortName"    
  85.                                                 [(ngModel)]="Country.CurrencyShortName" #currencyShortName="ngModel"    
  86.                                                 [ngClass]="{ 'is-invalid': f.submitted && currencyShortName.invalid }"    
  87.                                                 required />    
  88.                                             <div *ngIf="f.submitted && currencyShortName.invalid"    
  89.                                                 class="invalid-feedback">    
  90.                                                 <div    
  91.                                                     *ngIf="currencyShortName.errors.required || currencyShortName.pristine==false">    
  92.                                                     Currency    
  93.                                                     Short Name is required</div>    
  94.                                             </div>    
  95.                                         </div>    
  96.                                     </div>    
  97.     
  98.                                     <div class="col-12 col-md-12">    
  99.                                         <div class="btn-group mb-3 mt-2 cmn-btn-grp">    
  100.                                             <button *ngIf="!updateCountry" type="submit" style="margin-left:1px"    
  101.                                                 class="btn btn-success">Add    
  102.                                                 Country</button>    
  103.                                             <button *ngIf="updateCountry" type="submit" style="margin-left:1px"    
  104.                                                 class="btn btn-success">Update    
  105.                                                 Country</button>    
  106.                                         </div>    
  107.                                     </div>    
  108.                                 </div>    
  109.                             </div>    
  110.                         </div>    
  111.                     </div>    
  112.                 </div>    
  113.     
  114.                 <div class="col-12 col-md-12">    
  115.                     <div class="card">    
  116.                         <div class="card-header">Country Management</div>    
  117.                         <div class="card-body position-relative">    
  118.                             <div class="table-responsive cnstr-record product-tbl">    
  119.                                 <table class="table table-bordered heading-hvr">    
  120.                                     <thead>    
  121.                                         <tr>    
  122.                                             <th class="active">Country Name</th>    
  123.                                             <th>Short name</th>    
  124.                                             <th>Currency name</th>    
  125.                                             <th>Currency short name</th>    
  126.                                             <th width="60"> </th>    
  127.                                             <th width="60"> </th>    
  128.                                         </tr>    
  129.                                     </thead>    
  130.                                     <tbody>    
  131.                                         <tr *ngFor="let countryList of countries">    
  132.                                             <td>{{countryList.CountryName}}</td>    
  133.                                             <td>{{countryList.CountryShortName | uppercase}}</td>    
  134.                                             <td>{{countryList.Currency}}</td>    
  135.                                             <td>{{countryList.CurrencyShortName | uppercase}}</td>    
  136.                                             <td class="case-record">    
  137.                                                 <button type="button" class="btn btn-info"    
  138.                                                     (click)="editCountry(countryList.id)">Edit</button>    
  139.     
  140.                                             </td>    
  141.                                             <td> <button type="button" class="btn btn-danger"    
  142.                                                     (click)="deleteCountry(countryList.id)">Delete</button></td>    
  143.                                         </tr>    
  144.                                     </tbody>    
  145.                                 </table>    
  146.                             </div>    
  147.                         </div>    
  148.                     </div>    
  149.                 </div>    
  150.     
  151.             </div>    
  152.         </div>    
  153.     </form>    
  154. </div>     
Step 12
 
Open the app.component.html file and add the following code in this file,
  1. <app-cloud-firestore></app-cloud-firestore>  
Step 13
 
Create a class "country.ts" and paste the code:
  1. ng g class country  
  1. export class Country {  
  2.     CountryName: string;  
  3.     CountryShortName: string;  
  4.     Currency: string;  
  5.     CurrencyShortName: string;  
  6. }  
Step 14
 
Create one service "countryService" 
  1. ng g s country  
 Paste the following code in country service.ts
  1. import { Injectable } from '@angular/core';  
  2. import { HttpClient } from '@angular/common/http';  
  3. import { AngularFirestore } from '@angular/fire/firestore';  
  4.   
  5. @Injectable({  
  6.   providedIn: 'root'  
  7. })  
  8. export class CountryService {  
  9.   
  10.   constructor(public http: HttpClient, private angularFirestore: AngularFirestore) {  
  11.   }  
  12.   
  13.   getAllCountry() {  
  14.     return this.angularFirestore.collection('Country').snapshotChanges();  
  15.   }  
  16.   
  17.   //Adding new Country   
  18.   addCountryInforamtion(countryInfo) {  
  19.     return this.angularFirestore.collection('Country').add(countryInfo);  
  20.   }  
  21.   //Update Existing Country  
  22.   updateCountryInforamtion(countryid, countryInfo) {  
  23.     delete countryInfo.id;  
  24.     this.angularFirestore.doc('Country/' + countryid).update(countryInfo);  
  25.   }  
  26.   
  27.   //Delete Country  
  28.   deleteCountry(id) {  
  29.     this.angularFirestore.doc('Country/' + id).delete();  
  30.   }  
  31. }  
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:
  1. 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,
  1. import { Component, OnInit } from '@angular/core';  
  2. import { Country } from '../country';  
  3. import { CountryService } from '../country.service';  
  4. import { AngularFireDatabase, AngularFireList } from '@angular/fire/database/database';  
  5.   
  6. @Component({  
  7.   selector: 'app-real-time-database',  
  8.   templateUrl: './real-time-database.component.html',  
  9.   styleUrls: ['./real-time-database.component.css']  
  10. })  
  11. export class RealTimeDatabaseComponent {  
  12.   updateCountry: boolean = false;  
  13.   countries: Country[];  
  14.   Country: Country = new Country();  
  15.   
  16.   countryId = null;  
  17.   isToggle: boolean = false;  
  18.   formSubmitted: boolean;  
  19.   isDelete: boolean;  
  20.   
  21.   CountryList: AngularFireList<any>;  
  22.   
  23.   constructor(private _countryService: CountryService,  
  24.     private angularFireDatabase: AngularFireDatabase  
  25.   ) {  
  26.     this.getAllCountry();  
  27.   }  
  28.   
  29.   getAllCountry() {  
  30.     this.CountryList = this.angularFireDatabase.list('Country');  
  31.     this.CountryList.snapshotChanges().subscribe((data: any) => {  
  32.       this.countries = data.map(e => {  
  33.         return {  
  34.           id: e.payload.key,  
  35.           ...e.payload.val()  
  36.         } as Country;  
  37.       });  
  38.       console.log(this.countries);  
  39.     });  
  40.   
  41.   }  
  42.   
  43.   onSubmit(f) {  
  44.     if (f.form.valid) {  
  45.   
  46.       if (this.countryId == null) {  
  47.         this.CountryList.push({  
  48.           CountryName: this.Country.CountryName,  
  49.           CountryShortName: this.Country.CountryShortName,  
  50.           Currency: this.Country.Currency,  
  51.           CurrencyShortName: this.Country.CurrencyShortName  
  52.         })  
  53.   
  54.       } else {  
  55.         this.CountryList.update(this.countryId, {  
  56.           CountryName: this.Country.CountryName,  
  57.           CountryShortName: this.Country.CountryShortName,  
  58.           Currency: this.Country.Currency,  
  59.           CurrencyShortName: this.Country.CurrencyShortName  
  60.         })  
  61.       }  
  62.       this.Country = new Country();  
  63.       f.submitted = false;  
  64.       this.formSubmitted = true;  
  65.       this.updateCountry = false;  
  66.       setInterval(() => {  
  67.         this.formSubmitted = false;  
  68.       }, 2000);  
  69.     }  
  70.   }  
  71.   
  72.   //Edit Country method  
  73.   editCountry(countryId) {  
  74.     this.countryId = countryId;  
  75.     let obj: any = this.countries.filter((x: any) => {  
  76.       return x.id == countryId;  
  77.     });  
  78.     this.updateCountry = true;  
  79.     this.Country = obj[0];  
  80.   }  
  81.   
  82.   // Delete Country method  
  83.   deleteCountry(countryId) {  
  84.     if (confirm('Please note! This action can NOT be undone. Are you sure you want to delete?')) {  
  85.   
  86.       this.CountryList.remove(countryId);  
  87.       this.isDelete = true;  
  88.       setInterval(() => {  
  89.         this.isDelete = false;  
  90.       }, 2000);  
  91.     }  
  92.   }  
  93.   
  94. }  
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,
  1. <div class="card">    
  2.     <form name="form" (ngSubmit)=" onSubmit(f)" #f="ngForm" novalidate>    
  3.         <div class="card-body pb-0">    
  4.             <div class="card">    
  5.                 <div class="card-header main-search dash-search">    
  6.                     <h1 style="text-align: center;">    
  7.                         MANAGE COUNTRY-Using Real-time Database    
  8.                     </h1>    
  9.                 </div>    
  10.             </div>    
  11.             <div class="row">    
  12.                 <div class="col-12 col-md-12">    
  13.                     <div class="card">    
  14.                         <div *ngIf="!updateCountry" class="card-header">    
  15.                             Add New Country    
  16.                             <h3 *ngIf="formSubmitted" style="text-align: center; color: green;">New Country has been    
  17.                                 added    
  18.                                 successfully...</h3>    
  19.                             <h3 *ngIf="isDelete" style="text-align: center; color: green;">Country has been deleted    
  20.                                 successfully...</h3>    
  21.                         </div>    
  22.     
  23.                         <div *ngIf="updateCountry" class="card-header">    
  24.                             Update Country    
  25.                             <h3 *ngIf="formSubmitted" style="text-align: center; color: green;">Existing Country has    
  26.                                 been updated    
  27.                                 successfully...</h3>    
  28.                         </div>    
  29.     
  30.                         <div class="card-body">    
  31.                             <div class="center-form">    
  32.                                 <div class="row">    
  33.                                     <div class="col-12 col-md-6">    
  34.                                         <div class="form-group">    
  35.                                             <label class="col-form-label">Name<span    
  36.                                                     class="mandatoryFieldColor">*</span></label>    
  37.                                             <input type="text" class="form-control" name="CountryName" autofocus    
  38.                                                 [(ngModel)]="Country.CountryName" #country="ngModel"    
  39.                                                 [ngClass]="{ 'is-invalid': f.submitted && country.invalid }" required />    
  40.                                             <div *ngIf="f.submitted && country.invalid" class="invalid-feedback">    
  41.                                                 <div *ngIf="country.errors.required || country.pristine==false">Country    
  42.                                                     Name is required</div>    
  43.                                             </div>    
  44.                                         </div>    
  45.                                     </div>    
  46.                                     <div class="col-12 col-md-6">    
  47.                                         <div class="form-group">    
  48.                                             <label class="col-form-label">Country short name<span    
  49.                                                     class="mandatoryFieldColor">*</span></label>    
  50.                                             <input type="text" class="form-control" name="CountryShortName"    
  51.                                                 [(ngModel)]="Country.CountryShortName" #countryShortName="ngModel"    
  52.                                                 [ngClass]="{ 'is-invalid': f.submitted && countryShortName.invalid }"    
  53.                                                 required />    
  54.                                             <div *ngIf="f.submitted && countryShortName.invalid"    
  55.                                                 class="invalid-feedback">    
  56.                                                 <div    
  57.                                                     *ngIf="countryShortName.errors.required || countryShortName.pristine==false">    
  58.                                                     Country Short    
  59.                                                     Name is required</div>    
  60.                                             </div>    
  61.                                         </div>    
  62.                                     </div>    
  63.     
  64.                                     <div class="col-12 col-md-6">    
  65.                                         <div class="form-group">    
  66.                                             <label class="col-form-label">Currency name<span    
  67.                                                     class="mandatoryFieldColor">*</span></label>    
  68.                                             <input type="text" class="form-control" name="Currency"    
  69.                                                 [(ngModel)]="Country.Currency" #currencyName="ngModel"    
  70.                                                 [ngClass]="{ 'is-invalid': f.submitted && currencyName.invalid }"    
  71.                                                 required />    
  72.                                             <div *ngIf="f.submitted && currencyName.invalid" class="invalid-feedback">    
  73.                                                 <div    
  74.                                                     *ngIf="currencyName.errors.required || currencyName.pristine==false">    
  75.                                                     Currency Name is    
  76.                                                     required</div>    
  77.                                             </div>    
  78.                                         </div>    
  79.                                     </div>    
  80.                                     <div class="col-12 col-md-6">    
  81.                                         <div class="form-group">    
  82.                                             <label class="col-form-label">Currency short name<span    
  83.                                                     class="mandatoryFieldColor">*</span></label>    
  84.                                             <input type="text" class="form-control" name="CurrencyShortName"    
  85.                                                 [(ngModel)]="Country.CurrencyShortName" #currencyShortName="ngModel"    
  86.                                                 [ngClass]="{ 'is-invalid': f.submitted && currencyShortName.invalid }"    
  87.                                                 required />    
  88.                                             <div *ngIf="f.submitted && currencyShortName.invalid"    
  89.                                                 class="invalid-feedback">    
  90.                                                 <div    
  91.                                                     *ngIf="currencyShortName.errors.required || currencyShortName.pristine==false">    
  92.                                                     Currency    
  93.                                                     Short Name is required</div>    
  94.                                             </div>    
  95.                                         </div>    
  96.                                     </div>    
  97.     
  98.                                     <div class="col-12 col-md-12">    
  99.                                         <div class="btn-group mb-3 mt-2 cmn-btn-grp">    
  100.                                             <button *ngIf="!updateCountry" type="submit" style="margin-left:1px"    
  101.                                                 class="btn btn-success">Add    
  102.                                                 Country</button>    
  103.                                             <button *ngIf="updateCountry" type="submit" style="margin-left:1px"    
  104.                                                 class="btn btn-success">Update    
  105.                                                 Country</button>    
  106.                                         </div>    
  107.                                     </div>    
  108.                                 </div>    
  109.                             </div>    
  110.                         </div>    
  111.                     </div>    
  112.                 </div>    
  113.     
  114.                 <div class="col-12 col-md-12">    
  115.                     <div class="card">    
  116.                         <div class="card-header">Country Management</div>    
  117.                         <div class="card-body position-relative">    
  118.                             <div class="table-responsive cnstr-record product-tbl">    
  119.                                 <table class="table table-bordered heading-hvr">    
  120.                                     <thead>    
  121.                                         <tr>    
  122.                                             <th class="active">Country Name</th>    
  123.                                             <th>Short name</th>    
  124.                                             <th>Currency name</th>    
  125.                                             <th>Currency short name</th>    
  126.                                             <th width="60"> </th>    
  127.                                             <th width="60"> </th>    
  128.                                         </tr>    
  129.                                     </thead>    
  130.                                     <tbody>    
  131.                                         <tr *ngFor="let countryList of countries">    
  132.                                             <td>{{countryList.CountryName}}</td>    
  133.                                             <td>{{countryList.CountryShortName | uppercase}}</td>    
  134.                                             <td>{{countryList.Currency}}</td>    
  135.                                             <td>{{countryList.CurrencyShortName | uppercase}}</td>    
  136.                                             <td class="case-record">    
  137.                                                 <button type="button" class="btn btn-info"    
  138.                                                     (click)="editCountry(countryList.id)">Edit</button>    
  139.     
  140.                                             </td>    
  141.                                             <td> <button type="button" class="btn btn-danger"    
  142.                                                     (click)="deleteCountry(countryList.id)">Delete</button></td>    
  143.                                         </tr>    
  144.                                     </tbody>    
  145.                                 </table>    
  146.                             </div>    
  147.                         </div>    
  148.                     </div>    
  149.                 </div>    
  150.     
  151.             </div>    
  152.         </div>    
  153.     </form>    
  154. </div>     
Step 12
 
Open the app.component.html file and add the following code in this file,
  1. <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.