Angular 7 CRUD with Firestore

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.

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.

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.

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