Angular 7 CRUD with Firestore

Firestore CRUD in Angular 7

Let’s implement Angular 7 CRUD operations – Insert, Update and Delete with Firestore. We have already implemented CRUD operations in Angular but it was in Firebase – Realtime Database.

GitHub link for this project : https://goo.gl/fgWURC.

Create Angular 7 & Firebase Projects

Execute following Angular-CLI command to create Angular 7 project – Angular7Firestore.

In following steps you can avoid routing and for style sheet select CSS format.

Now let’s create Firebase project with Firestore DB. Go to Firebase Console. Create new Firebase project, then go to Database(Project Overview >Develop >Database). Create new Firestore DB .Select test mode if you don’t want permission to access the project.

Add Firebase Project to Angular App.

First of all install required npm packages – firebase and @angular/firebase.

Now go to Firebase project overview. then click on web option near to android and ios icon. then copy config object.

Copy Firebase Configuration Details

Inside Angular app. past the copied connection details in environments/environment.ts file.

Now let’s configure the Angular app. for firebase project. for that update app.module.ts file as follows using environment constant firebaseConfig property.

Let’s Start App. Design

For this application we will be using Bootstrap and Font Awesome Icons. so let’s add their reference in index.html.

Here is the structure of the application that we want to built.

In this application, we will work with employee details like – Name, Employee Code, Position and Mobile.

We have the parent component – employees. with two child components employee and employee-list. inside shared folder we have service and model class for employee. we can create these files with following CLI commands.

spec flag will skip the test file with extension spec.ts, and for model creation class command type flag is used to name the with extension model.ts.

Now let’s start modify application design from default app component. For that update app.compont.html as follows.

Inside parent component – employees, we will show child components side by side using bootstrap grid system.

Design Form for Angular CRUD Operations

Start with employee model. so update employee class with required properties.

Now using employee model class property we can design a form in employee child component. Since the property is to be shared among child components, we declared the model property in service class and we will inject the service class  in app.module.ts file. There by we can share the single instance among child components.

Now let’s inject the service class in app module, for that just add the class in providers array as follows.

In-order to use the same instance of employee service class, create a private property of service class in employee constructor.

Now you can update employee.component.html as follows.

Here we have designed the form using template driven approach, so don’t forget to add FormsModule  to app module imports array.

Form Validation

Inside the above form we have implemented form validation also, we made full name as a required field for the form submission. we disabled form submit button when the whole form is invalid.

Beneath the full name input control, we have shown validation error message div. it will be visible when full name input control is invalid even after touched. In-order to show validation error indication I have used css rule. so following css rules are added to styles.css.

Finally here we have the form.

Firestore CRUD Form

Insert/ Update Firestore document from Angular

So let’s implement the form submit event in employee.component.ts file.

Here we have injected EmployeeService and AngularFirestore classes. we have defined the restoreForm function (to initialize form properties) and called the function inside ngOnInit Life-cycle hook.

Inside OnSubmit we deal with form submit event. both Insert and update operation is implemented inside the function. Current operation is determined by the value of id property. if it is null, new document will be added to Firestore collection –employee else we will update Firestore document with given id.

we have deleted id property from data variable, because we don’t want to insert/ update it, Firestore automatically creates the id for each document.

List Firestore collection in HTML Table

To list documents from Firestore collection, First of all I’ll define getEmployees function in EmployeeService class as follows.

HTML Table will be shown in employee-list component. For that first of all you have to create an array/ collection of employee model class with documents from Firestore. So I will update the employee-list component as follows.

Here we have injected EmployeeService and AngularFirestore classes. In ngOnInit, we have called getEmployees from the service class. Inside the call back function we stores employee records in list array, Before talking about onEdit and onDelete functions, let me show you how to show Firestore documents in HTML Table.

On td cell click we call onEdit function, to populate corresponding record in the form. In last td cell, we have a hyperlink for delete operation, it wired up with the function onDelete.

Picture showing firestore collection listed in Html table

Add ngx-toastr Notification Package

After any of the above Firestore CRUD Operation, Let’s show notification saying “operation is completed successfully”. For that we use ngx-toastr npm package. You can install the package with following npm command.

Then open angular.json file, search for styles array inside that along with styles.css, add toastr.css styles sheet also.

Lets configure the package in app.module.ts.

Let’s use this in onSubmit function in employee.component.ts

success function from toastr will apply a background color, for delete operation in employee-list component we can call warning function. it has the orange background.

Video Tutorial

Make sure to subscribe our YouTube Channel – CodAffection.

 

 

 

17
Leave a Reply

avatar
15 Comment threads
2 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
14 Comment authors
vicos2MorenoRidaSebassukhvir singh Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Johan G,
Guest
Johan G,

Good evening, can you make this same tutorial work with .net core, or this https://github.com/CodAffection/Angular-5-Login-and-Logout-in-Web-API-Using-Token-Based-Authentication work with firebase?

Cesar Sousa
Guest
Cesar Sousa

A correction in item: “Add Firebase Project to Angular App”
$ npm i –s firebase @angular/fire

Thank for your job!

Abdelhalim EL HADI
Guest
Abdelhalim EL HADI

Very good tutorial…

Khalid Akhter
Guest
Khalid Akhter

Thanks,Very Good.

Ekundayo Seyi
Guest
Ekundayo Seyi

first error i found is with the import statement for angular fire store, what you have on the video is different from what you have here. and what you have here gives error and got me stuck for a while.

Manikandan
Guest
Manikandan

Please implement CURD operation with JSON file instead of Entityframwork(DB) using Angular 7.

Sofien
Guest
Sofien

I followed exactly what you did. Everything was alright until Form Validation then I had a blank white page.

Luzimar
Guest
Luzimar

Do you how to send this two projects to unique repository of github?

sukhvir singh
Guest
sukhvir singh

Your CRUD project with firebase is excellent .Whole project run with smoothly and fast now I am interested to learn angular with firebase . how can learn step by step angular with firebase database

sukhvir singh
Guest
sukhvir singh

I want to learn angular 7 with firebase .Please start angular 7 with firebase step by step tutorial , I am waiting your responce

Sebas
Guest
Sebas

Hi!, thank you for this tutorial!, but I have some error to do it same as you… may be you can help me… in the employee-list component.ts when I try to use the payload, I am receiving this error “Property ‘payload’ does not exist on type ‘{}'” – do you… Read more »

Rida
Guest
Rida

amazing tutorial! and running successfully. i need help with image upload in this form

Moreno
Guest
Moreno

My name is Moreno, I’m 65 years old, I’ve always been passionate about programming, and I’m interested in Angular. I used a beautiful framework and with your examples I’m trying to understand it better. I’m following your example for creating a CRUD web application with SQL Server. The steps described… Read more »

vicos2
Guest
vicos2

hey i’am searching around how to show single post in angular, could you make tutorial for us?

Rida
Guest
Rida

is it possible to convert firestore in to cloud real time?