Skip to main content

Employee Management System with Angular

Introduction

In this tutorial, we will build an Employee Management System using Angular. This exercise demonstrates essential Angular concepts, including Angular Components, Data Binding, Interpolation, Property Binding, Event Binding, Two-way Data Binding, and Child/Nested Components.

Objective

Create an Employee Management System that allows you to manage a list of employees, demonstrating key Angular concepts.

Requirements

1. Main Application Component

  • Set up a new Angular project.
  • Create the main application component.

2. Employee List Component

  • Create `EmployeeListComponent` to display a list of employees.
  • Use interpolation to display employee names and other details.
  • Use property binding to dynamically set CSS classes based on employee properties (e.g., highlight employees with more than 5 years of experience).

3. Employee Detail Component

  • Create a nested component called `EmployeeDetailComponent` to show detailed information about a selected employee.
  • Use `@Input` to pass the selected employee from `EmployeeListComponent` to `EmployeeDetailComponent`.

4. Add New Employee Component

  • Create `AddEmployeeComponent` to add a new employee.
  • Use two-way data binding for the input fields to capture the new employee details.
  • Use event binding to handle the form submission and add the new employee to the list.

5. Main Component Integration

  • In the main component, use `EmployeeListComponent` to display the list of employees.
  • When an employee is clicked in `EmployeeListComponent`, display the employee details in `EmployeeDetailComponent`.
  • Include `AddEmployeeComponent` in the main component to allow adding new employees.

Steps

1. Setup

First, create a new Angular project using Angular CLI:

	ng new EmployeeManagementSystem
	cd employee-management-system
	ng generate component EmployeeListComponent
	ng generate component EmployeeDetailComponent
	ng generate component AddEmployeeComponent

2. EmployeeListComponent

In `employee-list.component.ts`, create a list of employees:


In `employee-list.component.html`, display the employees:


3. EmployeeDetailComponent

In `employee-detail.component.ts`, create an `@Input` property to accept an employee object:


In `employee-detail.component.html`, display the employee details:


4. AddEmployeeComponent

In `add-employee.component.ts`, create a form to input employee details:


In `add-employee.component.html`, create the form:


5. Main Component

In `app.component.ts`, integrate all components:


In `app.component.html`, use the components:



Example Data Structure for Employees



Additional Notes

  1. Ensure to follow Angular best practices, such as using services for shared data if needed.
  2. Style the components to make the application user-friendly.
  3. Test the application thoroughly to ensure all data bindings and component interactions work as expected.

Screenshot

Display all the employees


Click on any employee to view their details


Click on the add sign (+) to add a new employee




Repository


You can find the complete source code for this project on GitHub: EmployeeMangementSystem

Conclusion

By completing this exercise, you have created a fully functional Employee Management System using Angular. This exercise has covered essential Angular concepts such as components, data binding, and event handling. Happy coding!

Labels:

Comments

Post a Comment

Popular posts from this blog

Car Wash System vb.net

This software consists of a database that save the registration number of every vehicle being wash along side with the date, type of wash made and price Screen Shot Source Code To view records in the database: Dim conn As OleDbConnection = New OleDbConnection("Provider=Microsoft.ACE.OLEDB.12.0;Data Source=|DataDirectory|\washRcd.accdb;Persist Security Info=False") Dim sql As String sql = " SELECT * FROM tblwash" conn.Open() Dim dt As New DataTable Dim cmd2 As New OleDb.OleDbDataAdapter(sql, conn) cmd2.Fill(dt) DataGridView1.DataSource = dt DataGridView1.Refresh() conn.Close() To insert new record in the database: Private Sub insert() Dim conn As OleDbConnection = New OleDbConnection("Provider=Microsoft.ACE.OLEDB.12.0;Data Source=|DataDirectory|\washRcd.accdb;Persist Security Info=False") Dim updateSql As String = String.Format(...
10 comments
Read more

C# Windows Form : PetCare

A desktop application using C# as technology. the application is titled as "PETCARE" a system that a pet shop or veterinary can use it to store basic information about the pet's owner, details about the pet and the purpose of the visit to the veterinary or pet shot. The system also contained a stock management module that is used to track pet food purchased by a particular customer Screen Shot You can login both as a staff or as the admin. the admin has the privilege to register new staff and view details about transaction and other sensitive information. The system encrypt user password using MD5 algorithm The home screen of the application You can either add a new pet with its owner details or add another pet belonging to the same owner. both can be done using the same form below. and each pet owner will be given a reference number. Veterinary can use the application to store information about treatment done for a particular pet Can t...
1 comment
Read more

Student Information System - AngularJS , ASP.NET API, C#

Web based application the student information system is a small application that allows user to register and login to view information about a particular student and can perform several actions like Login and register to the application View students  Add new student Delete a particular student Update user information Screen Shot Project architecture routing.js, config.js and app.js allow the application to route from one partial view to another and config.js is used to save all the endpoint needed to access the API.   For separation of concerns, in the solution panel separate partial views, controller and services in different directories and reference it in index.html to enable angular to load all the files required Login process login.html LoginController.js Using $resource from AngularJS to make an API call and response  with a user details model UserViewModel and UserDetailsViewModel Using Unity fo...
2 comments
Read more