Design Employee Management System step by step using Angular 8

Angular 8 is a popular among web developers as it is open-source, and TypeScript framework that is compiled into JavaScript. Angular 8 is a latest version which have the ability to build dynamic web applications. Apart from that there are some extensive features as compared to the previous versions.

Creating Employee Management System using Angular 8 is going to describe here step by step.

1.Install Angular 8 and npm ,Node

As the first step Angular 8,Node and npm should be installed to the machine.To check whether node is already installed ,we can use following command.

node -v

If there is node you can see the version in command prompt.Otherwise you have to install nodejs to the machine.Then ,to check the npm version use the command below.

npm -v

Then to install angular use following command.

npm install -g @angular/cli

After complete those steps creating angular project can be started.

2.Create angular project

Firstly create a folder in any location of the machine to create the project.Then open the command prompt from that directory and type following command to create angular project.

ng new EmployeeApplication

Then open the command prompt from the location of the project to open visual studio code .Use following command for that

code .

3.Design UI for Employee Management system

In this application there are two pages ,Employee and Employee Reference.First of all components should be created for the project.

First of all I describe the structure of the project.This project is about employee management.This application is created to save employee details.As the first step all employee references(employee types ,ex:engineer,accountant,Clerk)should be inserted to the system and save them in the database.When insert employee details,he or she can select their employee type from previously added employee references and fill their details.Then their details save in the database and it can be use for any purpose.

Let’s create the UI for the application.I added this project to Git Hub and add links of every pages when they are explained.

As the first step let’s create the navigation bar

We can use following command to create menubar (navigation bar)component.It can be written in terminal or command prompt.

ng g c MenuBar

Then you can see four files were created.

HTML file holds the template of the application

CSS file holds the styles like colors,fonts,background of the application

ts file is a typescipt file which make the relationship between frontend and backend.

In this project I used bootstrap 4 template for the navigation bar.So I have to add bootstrap to the project .

I copied following code from bootstrap site and add it into <head >of index.html file

Now I can use bootstrap in my project.I got a template for the navigation bar from bootstrap.I add it into HTML file in menu bar component.

This is the HTML code.

When you compile the project in the terminal or command prompt you can see the navigation bar like mentioned above.Following command can be used to compile the project

ng serve

Navigation bar should be seen in every page in the application and you must add following code to app.component.html by deleting other codes which added default when creating the project.Apart from that router outlet tag is insert to load other component accoriding to their router link inside the app component.

Next we are going to design employee reference page

To create this page you should create new component called ReferenceDetails.

ng g c ReferenceDetails

You can use above mentioned command for that.This page mainly have the topic called current references ,grid and button(add references).Specially this button is in another component called ReferenceMenuComponent.It is loaded insode employeeDetails component.So you should generate that component by using below command.

ng g c ReferenceMenu

This is the HTML code of ReferenceDetails component

Here you can see below code .

<div class=”col”>

<app-reference-menu></app-reference-menu>

</div>

This implies that ReferenceMenu component is loaded inside ReferenceDetails component.

HTML Code in ReferenceMenuComponent as follows

Functions to get data to the grid ,delete a row in the grid,update a row in the grid is wirtten in referenceDetails.ts file.It is shown below.

this.referenceService.getAllReferences() function is used to get data to the grid.goToForm(id:number) function is used to update the data in the row. deleteRef(id:number) is for deleting the data in the grid.

Code of referenceDetails.css file as follows

When click on the add reference button it is linked to another component called UpdateRefForm component You can create it using below command

ng g c UpdateRefForm

This is the html code of the component

css code as follows

This is the UI of of the form

When fill the input fields you can insert data by clicking on add new reference button.Save function of the form is in the ts file.Code of the ts file as follows

Now let’s move to create employee page

The view of the employee page is shown below

Structure of the page is same as reference page.

First of all you should create the components for the page .You can do it as follows

ng g c EmployeeDetails

Same as reference page,inside this component EmployeeMenu component is loadad.Let’s create that using below mentioned command

ng g c EmployeeMenu

This is the code of EmployeeDetails.html file

This is the code of EmployeeMenu.html file

Functions for getting data for employee grid,delete data,update data in employee grid are in the EmployeeDetails.ts file.

this is the cide of EmpoyeeDetails.ts file.

Same as reference page when click on add employee button a page with a form is loaded .to create that page we should generate a new component.The command as follows.

ng g c EmployeeForm

html code of the component as follows

Code of css file as follows

Save function of the form is in the ts file .It is shown below

3.1 Add router links

Through out the above codes you could see a tag called router-link in html files.It makes the navigation among the pages in the application.To add router link ,some code lines should be added to app routing module.ts file.

Code of the app routing module.ts file is shown below.

Here { path: ‘’, redirectTo: ‘/references’, pathMatch: ‘full’ }, implies that when there is ‘’ in the url the reference page is loaded.

{ path: ‘employees’, component: EmployeeDetailsComponent }

,And here if there is employees is in the end of the url employeeDetailsComponent is loaded.We can use ‘employees’ as a link to load that page

Now I think that you could get some idea about router link.

3.2 create model

Amodel should be created to hold the data in api s.It can be done like this.Lets implement a model for employee details first.

ng generate model employee

this is the code of the model file.

This should be imported to the EmployeeDetails component to use it inside the component.It can be done like this.

import {Employee} from ‘src/app/Models/employee’;

This should be added to EmployeeDetails component,EmployeeForm component and Employee service file.

Let’s move to create a model to reference page .It is done like this.

ng generate model ReferenceType

The code is like this.

This should be import to ReferenceDetails component ,UpdateRefForm component and reference service file .It can be done like that.

import { ReferenceType } from ‘../Models/referenceType’;

3.3 create service file

There should be a service file which have the api paths of backend to connect frontend and backend.In this project I have created backend using ASP .Net core 2.2.I added api paths in service file.Let’s create the service file

ng generate service Reference

This is the code of service.It contains the api path of select,insert,update and delete functions.

Then you have to import this service file to the referenceDetails component.It can be done like this.

import { ReferenceService } from ‘src/app/Services/reference.service’;

Now we implement the api path for transaction data between reference page frontend and backeend.

Let’s move to create the relationship between employeeDetails frontend and backend.To that we have to create another service file called EmployeeService

ng generate service EmployeeService

This is the code in EmployeeService Service file

This contains api paths of employeeDetails page.We can import it to EmployeeDetails component using following code

import { EmployeeServiceService } from ‘src/app/Services/employee-service.service’;

Now the relationship between frontend and backend in EmployeeDetails page is created.

Now the relationship among the pages navigation among the pages and relationship between frontend and backend is created from frontwnd side.

now using following command in command prompt you can run the project and see how the UI are created.

ng serve

Normally angular projects are using the port 4200.

This is the view of two pages after adding data.

For further reference and get more idea about the project I insert my project path in github here.You can refer it for further study.