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
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
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.
