Angular 7 CRUD with Firestore - CodAffection

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.


ng new 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.


npm i --s firebase @angular/fire

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.


● src
+---● app
|   +--● employees
|   |  |--employees.component.ts|.html|.css
|   |  +--● employee
|   |  |  |--employee.component.ts|.html|.css
|   |  |
|   |  +--● employee-list
|   |  |  |--employee-list.component.ts|.html|.css
|   |  |
|   |  +--● shared
|   |     |--employee.service.ts
|   |     |--employee.model.ts
|   |
|   |--app.module.ts (configured firebase connection)
|
+---● environments  
|   |--environment.ts (saved firebase connection details)
|
|--index.html (cdn path for bootstrap and font awesome icon)

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.


ng g c employees --spec=false
# child components
ng g c employees/employee --spec=false
ng g c employees/employee-list --spec=false
# service class
ng g s shared/employee --spec=false
# model class
ng g cl shared/employee --type=model

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.


input.ng-touched.ng-invalid{
    border-color: #dc3545;
}

div.validation-error{
    width: 100%;
    margin-top: .25rem;
    font-size: 80%;
    color: #dc3545;
}

/* for table row hover - in employee-list component */
table.table-hover tbody tr:hover{
    cursor: pointer;
}

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.


npm install ngx-toastr --save

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.

https://www.youtube.com/watch?v=5I6k77uqtLY

20 thoughts on “Angular 7 CRUD with Firestore”

  1. The file to import the FormsModule is the app.module.ts, as you discribed on the text, not employee.module.ts, as it is written on the code

  2. its very good information with angular and firestore sir. but we want django and angular tutorial with advance concept just like authentication, user interface and backend admin etc. Thank you sir to give helpful knowledge

  3. 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 in your tutorial are extremely clear, but I find myself in a problem when registering users.
    I’d like to ask you if you can help me figure out where I’m wrong.
    I leave you my email for a contact and I would like to ask you if I can send you an email describing the problem, which is certainly trivial.
    Thank you

    Moreno

    misonsan@libero.it

  4. 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 know about it? I am use angular 7

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

  6. 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

  7. 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.

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

    Thank for your job!

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top
1 Share
1 Share
Share via
Copy link