In this section, we will learn how to implement HTTP functionality for a NoSQL Firestore database. We created our Firestore database in an earlier section. Now is the right time to integrate the Angular HTTP calls, which will invoke and work with the Firestore database. 

What are the use cases we will implement? For our ListingApp, we will need a commenting system. As a user, we should be able to add, edit, delete, and view comments. All of these use cases will require us to make HTTP calls to APIs to save, retrieve, and delete comments.

Angular Fire is the official library for Firebase. The library provides a lot of built-in modules that support activities such as authentication, working with Firestore databases, observable-based push notifications, and much more.

We will need to install this module under @angular/fire. Run the following command in the command-line interface to install the library:

npm i @angular/fire 

When we run the preceding command successfully, we should see the following output:

Once we have installed the library, we will proceed and create a new custom service for our integration pieces with the Firestore database. 

Run the following command to generate a new service:

ng generate service crudService

When we run the preceding command successfully, we should see the following output:

You will notice that two files are generated. We will implement all our HTTP calls inside the service. As we mentioned previously, we will need to create a few components that will map to each piece of functionality and will internally call the service that has the HTTP implementations.

Run the following ng generate commands to generate components for the comment's functionality:

ng generate component addComments

ng generate component viewComments

ng generate component editComments

ng generate component deleteComments

When we run the preceding commands successfully, we should see the following output:

You will notice that the components have been generated and added to our project directory. You will also notice that the app.module.ts file has been updated with entries for the components.

We have generated our components and the service that's required for our integration. We have also installed the Angular Fire library. In order to use the Angular Fire library in our application, we will need to import the library into our app.module.ts file. Import the required modules into the app module file and list the modules in the import list of our application, as shown here:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule} from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CreateListingComponent } from './create-listing/create-listing.component';
import { ViewListingComponent } from './view-listing/view-listing.component';
import { DeleteListingComponent } from './delete-listing/delete-listing.component';
import { UpdateListingComponent } from './update-listing/update-listing.component';

import {FormsModule} from '@angular/forms';

import { AngularFireModule} from 'angularfire2';
import {AngularFireDatabaseModule} from 'angularfire2/database';
import { AngularFireAuth } from '@angular/fire/auth';
import { environment } from './firebase-config';
import { AngularFirestore } from '@angular/fire/firestore';
import { AddCommentsComponent } from './add-comments/add-comments.component';
import { EditCommentsComponent } from './edit-comments/edit-comments.component';
import { ViewCommentsComponent } from './view-comments/view-comments.component';
import { DeleteCommentsComponent } from './delete-comments/delete-comments.component';

@NgModule({
  declarations: [
    AppComponent,
    CreateListingComponent,
    ViewListingComponent,
    DeleteListingComponent,
    UpdateListingComponent,
    AddCommentsComponent,
    EditCommentsComponent,
    ViewCommentsComponent,
    DeleteCommentsComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireDatabaseModule,
    FormsModule
  ],
  providers: [AngularFirestore],
  bootstrap: [AppComponent]
})
export class AppModule { }

One important thing to note in the preceding code is that we are importing the required modules from Angular Fire and also listing them under the import module list. Notice that we have imported a file called firebase-config. These are environment variables, which will hold the API keys for authentication with Firebase. We can find the API keys listed under the Firebase account, as shown in the following screenshot:

We will need to copy the details into the firebase-config.ts file. The following screenshot displays the settings specified in our ListingApp:

So far, so good. Now that we have installed the required library, imported the modules, and done the configuration settings, it's time to work on our application components. We are making great progress here. Let's keep this momentum going.

Now that we have created our components, we will quickly modify our app-routing.module.ts file and create a new route for each of these components. 

In the following code, we have imported all the required component classes into the app-routing.module.ts file and added the respective routes to the routing file:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {UpdateListingComponent} from './update-listing/update-listing.component';
import {CreateListingComponent} from './create-listing/create-listing.component';
import {ViewListingComponent} from './view-listing/view-listing.component';
import {DeleteListingComponent} from './delete-listing/delete-listing.component';

import { AddCommentsComponent } from './add-comments/add-comments.component';
import { EditCommentsComponent } from './edit-comments/edit-comments.component';
import { ViewCommentsComponent } from './view-comments/view-comments.component';
import { DeleteCommentsComponent } from './delete-comments/delete-comments.component';

const routes: Routes = [
  { path:'create-listing', component:CreateListingComponent },
  { path:'view-listing', component:ViewListingComponent },
  { path:'delete-listing/:id', component:DeleteListingComponent},
  { path:'update-listing/:id', component:UpdateListingComponent},
  { path:'add-comment', component:AddCommentsComponent },
  { path:'view-comment', component:ViewCommentsComponent },
  { path:'delete-comment/:id', component:DeleteCommentsComponent},
  { path:'update-comment/:id', component:EditCommentsComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

We will use the four newly created routes to implement the comment's functionality in ListingApp. We are going to add the CRUD operations using the Firestore database. We will need to import the AngularFirestore module to our service, as shown here:

import { AngularFirestore } from '@angular/fire/firestore';

After we have imported the module into our file, we will need to inject it inside the constructor method, as follows:

constructor(private afStore : AngularFirestore, private route: Router ) { }

We can now make use of the AngularFirestore module and implement CRUD operations using Firestore. Take a look at the complete updated code in the crud-service.service.ts file:

import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { environment } from './firebase-config';
import { AngularFirestore } from '@angular/fire/firestore';

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

  constructor(private afStore : AngularFirestore) { }

  getComments() {
    return this.afStore.collection('comments');
  }

  deleteComment(id) {
    this.afStore.collection('comments').doc(id).delete();
  }

  addComment(newComment) {
    this.afStore.collection('comments').add(newComment);
  }

  updateComment(id, editedComment) {    
    this.afStore.collection('comments').doc(id).set(editedComment);
  }
}

Let's analyze the preceding code in detail. We have imported all the required modules, including our Angular Fire module and our firebase-config file. Since we have imported our AngularFireStore module, we will need to inject it into our constructor method and create an instance of it. We are creating methods for each of the actions for the comment's functionality. In the getComments method, we are retrieving all the data from the comments collection. In the deleteComment method, we are passing the ID of the comment we need to delete. In the addComment method, we are passing the data that we want to store in our collection. In the updateComment method, we are passing two parameters; the first is the ID of the comment we want to update, and the second is the updated data that we need to persist in the database.

You may wonder why we did not make any HTTP calls in these methods? The AngularFireStore module internally makes HTTP calls to the service and will authenticate and get account-specific information from the firebase config file. 

In earlier sections, we learned how to send data from components to the service, right? Along the same lines, go ahead and try for comments functionality. That's your homework.