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.
Thank you so much …. it’s really helped me a lot to start with angular
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
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
is it possible to convert firestore in to cloud real time?
hey i’am searching around how to show single post in angular, could you make tutorial for us?
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
amazing tutorial! and running successfully. i need help with image upload in this form
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
I want to learn angular 7 with firebase .Please start angular 7 with firebase step by step tutorial , I am waiting your responce
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
Do you how to send this two projects to unique repository of github?
I followed exactly what you did. Everything was alright until Form Validation then I had a blank white page.
Please implement CURD operation with JSON file instead of Entityframwork(DB) using Angular 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.
Thanks,Very Good.
Very good tutorial…
A correction in item: “Add Firebase Project to Angular App”
$ npm i –s firebase @angular/fire
Thank for your job!
Thanks for the correction.
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?
yes, I’ll work on that too. thanks for the suggestion.