TechBlog: Angular 5 CRUD with Firebase database

Objective:

The objective of this tutorial is to develop Angular 5 CRUD Operations with Firebase as database.

Application Demo:

GitHub link:

https://github.com/shyamnarayan2001/Angular_Projects/tree/master/angular5firebasecrud

Softwares Required:

The following are the softwares required to implement this.

- Node

- Angular CLI

- Angular 5

- Firebase project

- Firebase and AngularFire2 (npm packages)

- ngx-Toastr (npm package)

- Bootstrap and Font-Awesome Icons

- VS Code Editor

Please install them if they are not already installed.

Setup Instructions:

1. Git clone the project

2. Replace the existing Firebase credentials with your personal account in angular5firebasecrud\src\environments\ environment.ts (Please refer the blog and follow steps from 3 to 7 to get your personal Firebase credentials).

3. Open the command prompt, move the folder \angular5firebasecrud and run the command

npm install

4. Run the command ng serve

5. Open the browser and hit the URL http://localhost:4200/ to see the screen.

Development Steps to start from scratch:

Create Angular 5 application:

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

ng new angular5firebasecrud

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

//switch to project folder

cd angular5firebasecrud

//run the project

ng serve --open

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

Create Firebase Project:

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

4. Click On Add project. It will open a pop-up window, inside that name your project (Angular5CRUD in my case), then click on Create Project button.

5. Firebase will now try to create the project and you will see the below message. Now click “Continue”.

6. Click on ‘Add Firebase to your web app’.

7. It will open another popup window with firebase project configuration. Copy the below configuration (highlighted in yellow in the below screenshot) and paste it to environment.ts file (under \angular5firebasecrud\src\environments\).

Change FirebaseDB Permission:

8. On the left hand side, go the following menu options:

Left hand Menu -> Develop -> Database -> Realtime Database -> Get Started

9. You will see the below screen, now click the “Enable” button.

10. Goto Rules tab, edit the read and write values to ‘true’ and click “Publish” button. You will get a confirmation saying “Rules are published”.

11. You will get the below warning message, which you can “Dismiss” for now.

Install Firebase & Angularfire2 Modules:

12. If your ng serve command is still active, stop it with CTRL+C. Let’s now install Firebase and Angularfire2 npm packages.

13. Firebase and Angularfire2 are official packages to interact with firebase project from angular applications. In-order to install these packages use following npm commands

npm install firebase@4.6.1 angularfire2@5.0.0-rc.3 –save

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

Add Required Angular 5 CRUD Components, Model and Service Classes:

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

//from root component

ng g c employees

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

//switch to parent component directory

cd src\app\employees

//create child components

ng g c employee

ng g c employee-list

16. Open app.module.ts file, you can see that the newly added components are added already. If not, you can add them as shown in the below screen shot.

Let’s Start the Design:

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

18. Update app.component.html as follows

<app-employees></app-employees>

</div>

Add following to employees.component.html file.

<h2 class="jumbotron">Employee Register</h2>

</div>

<app-employee></app-employee>

</div>

<app-employee-list></app-employee-list>

</div>

We need Model and Services to design remaining child components.

Create Service and Model Classes:

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

Now create employee model class

//switch to shared folder

cd src\app\employees\shared

//create employee model class

ng g class employee --type=model

//create employee service class

ng g s employee

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

export class Employee {

$key: string;

name: string;

position: string;

office: string;

salary: number;

}

$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

/src/app/employees/shared/employee.service.ts

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:

21. 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 changes in one child component same change can be seen from other child component also.

Inject Employee Service in Components:

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

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

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:

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

25. Inside employee.component.ts file we will 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.

npm install ngx-toastr --save

then add ToastrModule inside app.module.ts file.

src/app/employees/employee/employee.component.ts

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 initialize 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:

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

you can add following inside employee-list component.

/src/app/employees/employee/employee-list.component.ts

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.

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.

That's all. Hope this tutorial was useful.

TechBlog

Sunday, April 1, 2018

Angular 5 CRUD with Firebase database

1 comment: