Angular 5 CRUD Operations With Firebase

This is a step by step tutorial on how to implement Angular 5 CRUD Operations with Firebase project. So let’s demonstrate Create Read Update and Delete Operations in an Angular 5 project. In one of my other article we discussed on CRUD Operations in Angular 5 with Web API.

Application Demo :

angular 5 crud operation project demo

Following tools and modules are used for this project :

– Angular CLI
– Angular 5
– Firebase project
– Firebase and AngularFire2 (npm packages)
– ngx-Toastr  (npm package)
– Bootstrap and Font-Awesome Icons
– VS Code Editor

we assume that you have installed required packages and software for angular 5 development.

Create Angular 5 Application

In-order to create an Angular 5 application, you can use following Angular CLI command

it will create an angular 5 application in the current directory and install some default npm packages.
To run this application

it will open this project in your default web browser from 4200 port.

Create Firebase Project

Goto Firebase Console. it will automatically log in with your gmail account.

Click On Add Project. it will open a pop-up window, inside that name your project, then click on Add Project button.After creating firebase project, Project Dashboard / Project Overview will be opened like this.

firebase project overview - click on Add Firebase to your web app

Click on ‘Add Firebase to your web app’, it will open another popup window with firebase project configuration. copy config object from there.

Copy Firebase Configuration Details

then past inside environment.ts  file as firebaseConfig.

Change FirebaseDB Permission

Goto Database > Rules Tab (if not showing click on ‘get started’)

Set following read & write permission

Install Firebase & Angularfire2 Modules

Firebase and Angularfire2 are official packages to interact with firebase project from angular applications.

In-order to install these packages use following npm commands

Open appmodule.ts file, then initialize firebase module with firebase project configuration.

Add Required Angular 5 CRUD Components, Model and Service Classes

Now we need to add 3 components, to add angular components you can use following Angular-CLI commands

remaining two components will be child components for this employees component.

Open app.module.ts file, Add newly added components into declarations array.

Let’s Start the Design

We’ll use Bootstrap and Font-Awesome Icons For Application Design. So first of all add CDN reference for the style sheets inside index.html .

Update app.component.html as follows

Add Following to employees.component.html file.

We need Model and Services to design remaining child components.

Create Service and Model Classes

To create these classes let’s add a new folder with name shared inside employees folder (/src/app/employees/ ).

Now create employee model class

In this application, we deals with employee details like

  • Full Name
  • Position
  • Office Location
  • Salary

So let’s add properties corresponding to these employee’s details inside employee.model.ts file.

$key is used to store unique key automatically generated by firebase DB when we insert a new record.

Inside the service file we will do Firebase CRUD Operation as follows

EmployeeService contains selectedEmployee property of the type employee model class Employee, to store currently active employee details. employeeList variable store all the employee records from Firebase DB.

In-order to interact with firebase project we have injected AngularFireDatabase as firebase. getData function initialize employeeList from firebase node ’employees’. we will store employee records under this node. rest of the functions are self explanatory.

Using selectedEmployee property we can design form for insert and update operation inside employee component,
In-order to list inserted employees we can use employeeList property in employee-list component. So first of all we have to Inject this service class inside child components. Before that we have to discuss our application structure.

Application Structure

This our application structure, component employees will be the parent component for employee and employee-list component.

We are going to inject EmployeeService inside the Parent Component Employees. and there by we can access the same injected service instance from child components Employee and Employee-List. so whenever we make make changes in one child component same change can be seen from other child component also.

Inject Employee Service in Components :

first of all inject the service class inside parent component Employees

To inject a class inside a component , mention the class inside component providers array and then create private parameter inside component constructor.

Now we can use this injected instance in child components, for that you can do this, Inside employee.component.ts file

Inside employee-list.component.ts file

Angular 5 CRUD Operations Form

We’ll create an employee form to implement Insert and Update Operation with employee Component. For that, let’s create a Template Driven Form(TDF) using selectedEmployee property from injected EmployeeService Class.

So first of all we have to import FormsModule in appmodule.ts file.

You can use following html in employee.component.html file.

and this employee form with data looks like this

Form to implement angular 5 CRUD Operations

This form is a collection of label – text box pair with Submit and Reset button. We have an extra hidden field to store $key of current employee. Same form is used for Insert and Update Operation.

Form Validation

required attribute is set to name text box, so employee name is mandatory to submit this form. When name text-box is invalid, ng-invalid and ng-dirty classes are added to it. So based on these we have implemented form validation.

when name is empty, employee form as whole is not valid so we add conditional disable attribute to Submit Button.

to show validation error indication we’ll show red border around the text box using CSS. Here is the complete css rules for this application

Insert, Update and Reset Operation

Inside employee.component.ts file we’ll write code for Insert and Update Operation. Before that I’m going to install ngx-toastr from npm package, this package helps us to show notification message inside angular applications.

ngx-toastr installation

In-order to install the package, you can use following npm command.

then add ToastrModule inside app.module.ts file.

Open .angular-cli.json, then update styles array.

Now you can add following code inside employee component.

restForm() function is used reset form controls value to initial stage, we called this function from reset button click event and from ngOnint  Lifecycle Hook to initialise the form.

Inside the form submit event function OnSubmit, we implement both insert and update operation based on $key value. To show the success message, we use ToastrService class object tostr.

List Inserted Records and Delete Operation

Using employee-list component, we’ll list all inserted employees and then implement Delete Operation.

you can add following inside employee-list component.

Inside this we have injected EmployeeService and ToastrService Classes. Also we created an Employee array employeeList. Inside the ngOnint  Lifecycle Hook, we subscribe to firebase db collection and we store employee records inside an array. Using this array variable, we will display inserted employees inside employee-list component.

employee-list.component.html looks like this.

Component design will look like this

show employee records inside an html table

when we click on pencil button, it will call onEdit() function to populate the corresponding record inside the employee form, after changing user’s details,he can update record as we discussed before(inside employee component).Using trash icon we implemented delete operation with onDelete()  function.

Download Project Source Code : https://goo.gl/83tyjH

Step by Step Video Tutorial

Thanks for the visit, hope you liked it, let me know your comments.

36
Leave a Reply

avatar
27 Comment threads
9 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
28 Comment authors
srinivasuluvinodMangesh JamdadeSwapnil BorodeNaresh Nain Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Oyedepo Olufemi
Guest
Oyedepo Olufemi

I just followed this tutorial. Everything worked perfectly! Thanks!!!

Mohammad R Rahman
Guest
Mohammad R Rahman

great tutorial

Rafael Moura
Guest
Rafael Moura

If I want get user by Id, exemple:
getUser(key: string) {
let teste = { key: ”, name: ‘ratal’ };
// console.log(key);

// console.log(this.firebase.object(key));
}

how I get user by Id please, someone ?

naresh
Guest
naresh

thanku for great tuturial

man
Guest
man

Your example is saving data even if you press Reset button

Pegamo
Guest
Pegamo

Thanks for this great tutorial. works perfectly. Have a question: I am using angular material for my form and I have used mat-select and mat-option for multiple selection. For editing, how can I show the currently selected options on the form??

Addison
Guest
Addison

I’m getting an error on running ng serve –open

It claims it “Cannot find module ‘bluebird'”

Any suggestions?

Tonson
Guest
Tonson

Thank you very much, you are genial

ChandraSekhar
Guest
ChandraSekhar

this example works perfectly.thanks for the information.Can someone help me how to perform queries such as i like to filter the names of the employees whose salary is greater than 5000.

ChandraSekhar
Guest
ChandraSekhar

please provide me any tutorial to fire queries on firebase using angular 5

John
Guest
John

Hi, thanks for this, this is great!

Are you able to provide a PAGINATION tutorial please?

Thanks

Bart
Guest
Bart

I have an issue with my edit function, it doesn’t seem to do anything if I click it and I’ve checked to make sure everything is correct

Alex Benedek
Guest
Alex Benedek

Thanks so much 🙂

Dhiren Pathak
Guest
Dhiren Pathak

pl. add search with crud apps, its a nice tutorial

joemags
Guest
joemags

You are awsome Sir

nsbr
Guest
nsbr

when I add following line whole page content not showen.Why?

Kevin
Guest
Kevin

You just saved my life! This is by far the best up to date tutorial. Thank you so much for this!!

Giacomo
Guest
Giacomo

Could you explain me how I can implement the same model but in every item I want to have another list. How can I change my .subscribe() method to populate also the sub-lists?

nasir shabazz
Guest
nasir shabazz

I admire you guys, it works well!! i appreciate this material on angular 5… in fact it’s my first ever material.
But when i store an employee, the toast displays at the left downside with no css as it does in your demo. could u guess why please?!

Elias
Guest
Elias

Hi great tutorial!!! But, how are data passed in the form when the edit button is pressed? I modified a bit the code to show only the list and after the edit button is pressed to show the form but it is empty.

gloubi
Guest
gloubi

Hi !

Thank you for this great tutorial.
I don’t understand the part “Inject Employee Service in Components”
Why do we import the service in employees component ?
If I just import the service in employee and employee-list component, It work as well.

Amar
Guest
Amar

why, when i’m adding datatable for employee-list showing error after insert update or delete, can you tell me ?

you can send answer to my email : [email protected]

thx 🙂

faeem
Guest
faeem

Getting error ERROR TypeError: Cannot read property ‘push’ of undefined at EmployeeService.insertEmployee (employee.service.ts:20) at EmployeeComponent.onSubmit (employee.component.ts:24) at Object.eval [as handleEvent] (EmployeeComponent.html:1) at handleEvent (core.js:13589) at callWithDebugContext (core.js:15098) at Object.debugHandleEvent [as handleEvent] (core.js:14685) at dispatchEvent (core.js:10004) at eval (core.js:12343) at SafeSubscriber.schedulerFn [as _next] (core.js:4354) at SafeSubscriber.__tryOrUnsub (Subscriber.js:243) View_EmployeeComponent_0 @ EmployeeComponent.html:1 proxyClass… Read more »

Naresh Nain
Guest
Naresh Nain

great everything worked perfectly thanks a lot…..

Swapnil Borode
Guest
Swapnil Borode

Man Awesome tutorial !!! Great job…:)…..I have gone through many sites of Angular 5 CRUD Application, none of them provided this much accurate approach.
Cheers !!!

Mangesh Jamdade
Guest
Mangesh Jamdade

Hi. This tutorial helps me to create my first angular app. But I am stuck on showing data from firebase. I got this error. “Property ‘toJSON’ does not exist on type ‘DatabaseSnapshot’ ” in src/app/employees/employee-list/employee-list.component.ts. I think I am missing some part of code. Thank you in advance

vinod
Guest
vinod

Hello,
I am getting below error
“node_modules appears empty, you may need to run `npm install”.
I tried npm install but again same issue.

srinivasulu
Guest
srinivasulu

thanks a lot.