Angular 7/6 | CRUD Operations using Firebase and Firestore Database in Angular Application Tutorial

In this post, we will implement the Firebase database in Angular 7 project. Firebase provides a cloud-based service Firestore, it is a NoSQL database which is very fast and easy to create and maintain.

In our example app, we will have Database CRUD operations which are commonly known as Create, Delete, Update and Delete. These are the basic database operation which is used in most of the real world application. To keep out app simple to understand we will not have routing.

Let’s start with our Angular 7 Firestore application which will have a Students data to perform CRUD operations.

Also See: Firestore CRUD Operation in Ionic 4 Application

Create a new Angular 7 project

then for Routing select no as in this application we will not use create any new component, for styling we choose SCSS.

Create a Firebase Project

If you already having any Firebase project, you can use that or follow these steps to create one and enable Firestore database. After creating a Firebase project we will use credentials in our Angular Application.

Step 1) Visit Firebase here then click on Get Started if you have not created an account yet.

Step 2) Click on “Add project” then enter app related information click on “create”

Step 3) Next click on “Web App” icon to get configuration text with app secret info which we will add in our Application to communicate with services related to this Firebase project.

Step 4) Then enable Firestore Database service in your Firebase project.

Click on “Database” in the left sidebar, then click on “+ Add collection” enter name “Students” you can add anything you want. Here we are creating example data for Students. Then hit “Next

On next screen delete the record on focus for this example or you can enter any dummy row data. We will add directly from App. After deleting then hit Save

Now we have Firebase project and Firestore Database with a collection “Students” is ready, the next step is to connect our Application with Firebase and Firestore Database.

Adding Firebase in Angular Application

Now open the Environment file at location “~Angular7Firestore/src/environments/environment.ts” then add Firebase project credentials as shown below

In app’s main module file we will import Firebase and Initialize firebase with environment credentials

Install Firebase in Application

Install Firebase SDK and @angular/fire package by running below CLI command

In app’s main module file we will import Firebase and Initialize firebase with environment credentials

Replace below code in you app.module.ts file

by following above steps your application is connected with Firebase and ready to perform CRUD operation on Firestore Database.

Create a Service with Firestore CRUD methods

Now create a service with CRUD operation methods. Service methods can be used anywhere without rewriting again and again.

Create a new service “~Angular7Firestore/src/app/service/crud.service.ts“, having the following methods

create_NewStudent: Create a new record in the specified collection using add method
read_Students: Call snapshotChanges method which will get records and also subscribe it to get updates
update_Student: Update record by taking ID then calling update method
delete_Student: Call delete method by taking record id
Replace below code in the crud.service.ts file

The final step is to create a page for User Interaction where we can create a new record and can view all rows available in the collection.

A user can also click on Edit and Delete buttons to perform record actions. In edit mode, the user can Cancel or Update changes.

To keep tutorial simple we will update existing home component which is created by default app component template.

app.component.ts

app.component.ts

 

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

4
Leave a Reply

avatar
3 Comment threads
1 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
4 Comment authors
Jolly.exeKennedyCharl van der merwevico Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
vico
Guest
vico

this works good…. could you make form with image upload? i can’t combine two different tutorial in your website ahaha.

Charl van der merwe
Guest
Charl van der merwe

thank you for this! you helped a total novice really get going with getting documents from fire base!

Kennedy
Guest
Kennedy

Great work and easy to understand. How can a student-details component be integrated to hold details of each student.

Thanks