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!