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';
  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';
  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();
  16. countryId = null;
  17. isToggle: boolean = false;
  18. formSubmitted: boolean;
  19. isDelete: boolean;
  21. constructor(private _countryService: CountryService,
  22. private angularFirestore: AngularFirestore
  23. ) {
  24. this.getAllCountry();
  25. }
  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);
  37. });
  38. }
  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;
  56. }, 2000);
  57. }
  58. }
  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. }
  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?')) {
  74. this._countryService.deleteCountry(countryId);
  75. this.isDelete = true;
  76. setInterval(() => {
  77. this.isDelete = false;
  78. }, 2000);
  79. }
  80. }
  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>
  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>
  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>
  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>
  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>
  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>
  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>
  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';
  5. @Injectable({
  6. providedIn: 'root'
  7. })
  8. export class CountryService {
  10. constructor(public http: HttpClient, private angularFirestore: AngularFirestore) {
  11. }
  13. getAllCountry() {
  14. return this.angularFirestore.collection('Country').snapshotChanges();
  15. }
  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. }
  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';
  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();
  16. countryId = null;
  17. isToggle: boolean = false;
  18. formSubmitted: boolean;
  19. isDelete: boolean;
  21. CountryList: AngularFireList<any>;
  23. constructor(private _countryService: CountryService,
  24. private angularFireDatabase: AngularFireDatabase
  25. ) {
  26. this.getAllCountry();
  27. }
  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. });
  41. }
  43. onSubmit(f) {
  44. if (f.form.valid) {
  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. })
  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. }
  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. }
  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?')) {
  86. this.CountryList.remove(countryId);
  87. this.isDelete = true;
  88. setInterval(() => {
  89. this.isDelete = false;
  90. }, 2000);
  91. }
  92. }
  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>
  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>
  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>
  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>
  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>
  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>
  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>
  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.