# Capstone - Employee Management System
Course: [Angular](https://www.devtutorials.ai/learn/angular) · Section: Project-Based Learning
Source: https://www.devtutorials.ai/learn/angular/projects/employee-management
> Build a complete Employee Management System: project structure, authentication and roles, reusable components, lazy routing, a signal store, reactive forms with validation, API integration, error handling and performance.
## Project Overview
In this lesson, you build an **Employee Management System**: an app for an HR team to view and manage the employees of a company. It uses the most important topics of this course in one project.
### Real-World Example
Most companies have an internal HR app like this one. HR administrators add new employees, update positions and salaries, and mark employees who have left as inactive. Team leads may only look up their colleagues.
The app must load fast, show clear messages when the server fails, and never let a viewer change employee data.
What the finished app can do:
- **Log in** with email and password. Two roles: **HR admin** and **viewer**.
- **List employees** with search, department filter and an "active" counter.
- **View** the details of one employee.
- **Add**, **edit** and **delete** employees (HR admin only), with form validation.
- **Protect** pages with route guards, and log out automatically when the token expires.
- **Handle errors** with clear messages and a global error banner.
| Feature | Lesson where you learned it |
|---|---|
| Components, `@Input()`, content projection | Components, Component Communication |
| Routing, route parameters, lazy loading | Routing |
| Services and dependency injection | Services, Dependency Injection |
| Reactive forms and validators | Reactive Forms, Form Validation |
| `HttpClient` and interceptors | API Integration |
| Signals and a store service | Angular Signals, State Management |
| JWT, guards and roles | User Access Control |
| `ErrorHandler`, `OnPush`, `track` | Error Handling, Performance Optimization |
## Project Setup
The project starts like every Angular app:
```bash
ng new employee-management
cd employee-management
ng generate environments
```
Then it gets a small Node.js **API server** in `server/server.js`, which you know from earlier capstone projects. The server:
- signs JWTs at login (`POST /api/auth/login`),
- answers the employee API (`GET`, `POST`, `PUT` and `DELETE` on `/api/employees`),
- returns **401** without a valid token and **403** when a viewer tries to change data.
Two scripts in `package.json` start the two parts:
```json
"scripts": {
"start": "ng serve",
"api": "node server/server.js"
}
```
The practice blocks on this page show each part of the app in a small, runnable form, with a practice server in the browser. The complete project, with the real API server, is in the download at the end.
## Application Structure
The code is grouped by **feature** and by **job**. Each folder has one clear purpose:
```text
src/app/
├── auth/ AuthService, interceptor, guards, user model
├── core/ global error handler, error banner state
├── shared/ reusable components: page header, status badge, search box
├── employees/ everything about employees
│ ├── employee.model.ts
│ ├── employee-api.service.ts HTTP requests
│ ├── employee-store.ts state with signals
│ ├── employee-validators.ts custom validator
│ ├── employee-list.ts
│ ├── employee-detail.ts
│ ├── employee-form.ts
│ └── employees.routes.ts lazy-loaded routes
├── pages/ login, access denied, not found
├── app.routes.ts
├── app.config.ts
└── app.ts
```
The layers of the Employee Management System.
Data always moves in the same direction: components call the **store**, the store calls the **API service**, and the API service talks to the **server**. Components never call `HttpClient` directly.
## Authentication
Authentication is the `AuthService` from the User Access Control lesson, without changes:
- `login()` sends the email and password and stores the JWT in a signal and in `localStorage`.
- `user`, `isLoggedIn` and `isAdmin` are computed from the token's payload.
- A timer logs the user out when the token expires.
- `authInterceptor` adds `Authorization: Bearer ` to every request and logs out on **401**.
```ts
// auth/auth.service.ts (shortened)
readonly user = computed(() => {
const token = this._token();
return token ? decodeToken(token) : null;
});
readonly isLoggedIn = computed(() => this.user() !== null);
readonly isAdmin = computed(() => this.user()?.role === 'admin');
```
The login page uses a template-driven form with `ngModel`. After a successful login, it opens the page that the user wanted, or `/employees`.
## Authorization
The app checks permissions in **three** places:
| Place | What it does | Example |
|---|---|---|
| Route guards | Block a whole page | `/employees/new` only for admins |
| Templates | Hide buttons the user may not use | **Add**, **Edit** and **Delete** only for admins |
| The server | Refuses forbidden requests with 403 | A viewer's `DELETE` request fails |
The server check is the one that really protects the data. The other two give a better experience.
```angular runnable title="Role-based buttons and routes"
import { Component, Injectable, computed, inject, signal } from '@angular/core';
import { CanActivateFn, Router, RouterLink, RouterOutlet, Routes } from '@angular/router';
@Injectable({ providedIn: 'root' })
export class AuthService {
readonly role = signal('user');
readonly isAdmin = computed(() => this.role() === 'admin');
}
export const roleGuard: CanActivateFn = route => {
const allowed: string[] = route.data['roles'] ?? [];
return allowed.includes(inject(AuthService).role() ?? '') ? true : inject(Router).createUrlTree(['/forbidden']);
};
@Component({
selector: 'app-employee-list',
imports: [RouterLink],
template: `
`,
})
export class App {
auth = inject(AuthService);
}
```
As a viewer, the **Add employee** link is hidden, and opening `/new` directly shows the "access denied" page. Click **HR admin** and try again.
## Reusable Components
Three small components in `shared/` are used on several pages:
- **`PageHeader`**: a title, a subtitle, and an area for buttons. The buttons are passed in with ``, so each page can add its own.
- **`StatusBadge`**: a green "Active" or grey "Inactive" label.
- **`SearchBox`**: an input that reports its text with an `@Output()`.
All three use `OnPush` and get their data only through inputs, so Angular checks them only when an input changes.
```angular runnable title="Reusable PageHeader and StatusBadge"
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
@Component({
selector: 'app-page-header',
template: `
}
`,
})
export class App {
employees = [
{ id: 1, name: 'Asha Rao', active: true },
{ id: 2, name: 'John Peter', active: false },
];
}
```
The same `PageHeader` shows one button on the list page and two buttons on the details page.
## Routing
The app has public routes, protected routes and a lazy-loaded employee section:
```ts
// app.routes.ts
export const routes: Routes = [
{ path: '', redirectTo: 'employees', pathMatch: 'full' },
{ path: 'login', component: Login, canActivate: [guestGuard] },
{
path: 'employees',
canActivate: [authGuard],
loadChildren: () => import('./employees/employees.routes').then(m => m.EMPLOYEE_ROUTES),
},
{ path: 'forbidden', component: Forbidden },
{ path: '**', component: NotFound },
];
```
```ts
// employees/employees.routes.ts
export const EMPLOYEE_ROUTES: Routes = [
{ path: '', component: EmployeeList },
{ path: 'new', component: EmployeeForm, canActivate: [roleGuard], data: { roles: ['admin'] } },
{ path: ':id', component: EmployeeDetail },
{ path: ':id/edit', component: EmployeeForm, canActivate: [roleGuard], data: { roles: ['admin'] } },
];
```
The route tree. The employees section is loaded only after login.
- `withComponentInputBinding()` puts `:id` into an `@Input() id` of the details and form components.
- `new` is listed **before** `:id`.
- The same `EmployeeForm` is used for **add** (no id) and **edit** (with an id).
Route order matters. If `:id` came before `new`, the router would match `/employees/new` with `:id` = "new" and open the details page instead of the form.
## Employee State
`EmployeeStore` holds all employee data in signals, as in the State Management lesson:
- **Private writable signals:** the employee list, the search text and the department.
- **Read-only signals for components:** created with `asReadonly()`.
- **Computed signals:** `filtered`, `total` and `activeCount`.
- **Methods:** `load()`, `setSearch()`, `setDepartment()`, `create()`, `update()` and `delete()`.
```angular runnable title="EmployeeStore with search and filter"
import { Component, Injectable, computed, inject, signal } from '@angular/core';
export interface Employee {
id: number;
name: string;
department: string;
active: boolean;
}
@Injectable({ providedIn: 'root' })
export class EmployeeStore {
private readonly _employees = signal([
{ id: 1, name: 'Asha Rao', department: 'Engineering', active: true },
{ id: 2, name: 'Ravi Kumar', department: 'Engineering', active: true },
{ id: 3, name: 'Meena Iyer', department: 'Design', active: true },
{ id: 4, name: 'John Peter', department: 'Sales', active: false },
]);
private readonly _search = signal('');
private readonly _department = signal('All');
readonly department = this._department.asReadonly();
readonly filtered = computed(() => {
const text = this._search().toLowerCase();
const department = this._department();
return this._employees().filter(
e => (department === 'All' || e.department === department) && e.name.toLowerCase().includes(text),
);
});
readonly total = computed(() => this._employees().length);
readonly activeCount = computed(() => this._employees().filter(e => e.active).length);
setSearch(text: string) {
this._search.set(text);
}
setDepartment(department: string) {
this._department.set(department);
}
}
@Component({
selector: 'app-root',
template: `
{{ store.activeCount() }} active of {{ store.total() }} employees
@for (d of departments; track d) {
}
@for (e of store.filtered(); track e.id) {
{{ e.name }} ({{ e.department }})
} @empty {
No employees match your search.
}
`,
})
export class App {
store = inject(EmployeeStore);
departments = ['All', 'Engineering', 'Design', 'Sales'];
}
```
Type a name, click a department, and combine both. The list is a computed signal, so it updates by itself.
After a successful save, the store updates its list with `update()`, so every page shows the new data without loading the whole list again:
```ts
update(employee: Employee) {
return this.api.update(employee).pipe(
tap(saved => this._employees.update(list => list.map(e => (e.id === saved.id ? saved : e)))),
);
}
```
## Employee Forms
`EmployeeForm` is a reactive form built with `FormBuilder`:
```ts
form = this.fb.nonNullable.group({
name: ['', [Validators.required, Validators.minLength(2)]],
email: ['', [Validators.required, Validators.email]],
department: ['Engineering', Validators.required],
position: ['', Validators.required],
salary: [50000, [Validators.required, Validators.min(0)]],
joinDate: ['', [Validators.required, notInFuture]],
active: [true],
});
```
- `nonNullable` makes `reset()` return each control to its first value instead of `null`.
- In **edit** mode, the component loads the employee and fills the form with `setValue()`.
- On **Save**, it calls `store.create()` or `store.update()` and opens the details page.
## Form Validation
The form uses built-in validators and one **custom validator**, `notInFuture`, from the Form Validation lesson:
```ts
export function notInFuture(control: AbstractControl): ValidationErrors | null {
if (!control.value) return null;
const today = new Date().toISOString().slice(0, 10);
return control.value > today ? { futureDate: true } : null;
}
```
Messages appear only after the user touched or changed a field. On **Save**, `markAllAsTouched()` shows every message at once.
```angular runnable title="The employee form with validation"
import { Component, inject, signal } from '@angular/core';
import { AbstractControl, FormBuilder, ReactiveFormsModule, ValidationErrors, Validators } from '@angular/forms';
export function notInFuture(control: AbstractControl): ValidationErrors | null {
if (!control.value) return null;
const today = new Date().toISOString().slice(0, 10);
return control.value > today ? { futureDate: true } : null;
}
@Component({
selector: 'app-root',
imports: [ReactiveFormsModule],
template: `
{{ result() }}
`,
styles: `.error { color: #b91c1c; font-size: 13px; }`,
})
export class App {
private fb = inject(FormBuilder);
result = signal('');
form = this.fb.nonNullable.group({
name: ['', [Validators.required, Validators.minLength(2)]],
email: ['', [Validators.required, Validators.email]],
salary: [50000, [Validators.required, Validators.min(0)]],
joinDate: ['2099-01-01', [Validators.required, notInFuture]],
});
showError(name: string) {
const control = this.form.get(name);
return !!control && control.invalid && (control.touched || control.dirty);
}
save() {
if (this.form.invalid) {
this.form.markAllAsTouched();
this.result.set('Please fix the marked fields.');
return;
}
this.result.set(`Saved: ${this.form.getRawValue().name}`);
}
}
```
The joining date is in the future, so its message is shown from the start. Click **Save** to see all the other messages, then fill in the fields correctly.
## Employee Records
The list and details pages display the employee records:
- The **list** shows a table row per employee, with `track employee.id`, and a link to `['/employees', employee.id]`.
- The **details** page reads the `id` input, requests `GET /api/employees/:id`, and shows the record with the `currency` and `date` pipes.
- **Delete** asks for confirmation with the browser's `confirm()` dialog, calls `store.delete()`, and returns to the list.
```angular runnable title="Records: list, details and delete"
import { ApplicationConfig, Component, Input, inject, signal } from '@angular/core';
import {
HttpClient, HttpErrorResponse, HttpHandlerFn, HttpRequest, HttpResponse,
provideHttpClient, withInterceptors,
} from '@angular/common/http';
import { Router, RouterLink, RouterOutlet, Routes, provideRouter, withComponentInputBinding } from '@angular/router';
import { delay, mergeMap, of, throwError, timer } from 'rxjs';
@Component({
selector: 'app-employee-list',
imports: [RouterLink],
template: `
}
`,
})
export class EmployeeDetail {
private http = inject(HttpClient);
private router = inject(Router);
employee = signal(null);
message = signal('Loading...');
@Input() set id(value: string) {
this.http.get(`/api/employees/${value}`).subscribe({
next: e => this.employee.set(e),
error: (err: HttpErrorResponse) => this.message.set(err.error.message),
});
}
remove(id: number) {
this.http.delete(`/api/employees/${id}`).subscribe(() => this.router.navigate(['/employees']));
}
}
const routes: Routes = [
{ path: '', redirectTo: 'employees', pathMatch: 'full' },
{ path: 'employees', component: EmployeeList },
{ path: 'employees/:id', component: EmployeeDetail },
];
export const appConfig: ApplicationConfig = {
providers: [
provideRouter(routes, withComponentInputBinding()),
provideHttpClient(withInterceptors([practiceServer])),
],
};
@Component({
selector: 'app-root',
imports: [RouterOutlet],
template: ``,
})
export class App {}
// ─── Practice server ──────────────────────────────────────────────
// Answers the employees API inside the browser, like in the API Integration lesson.
let employees = [
{ id: 1, name: 'Asha Rao', department: 'Engineering', position: 'Frontend Developer', active: true },
{ id: 2, name: 'Ravi Kumar', department: 'Engineering', position: 'Backend Developer', active: true },
{ id: 3, name: 'Meena Iyer', department: 'Design', position: 'UX Designer', active: true },
{ id: 4, name: 'John Peter', department: 'Sales', position: 'Account Manager', active: false },
];
let serverDown = false;
function practiceServer(req: HttpRequest, next: HttpHandlerFn) {
if (serverDown) return fail(500, 'Internal Server Error');
const id = Number(req.url.split('/')[3]);
if (req.url === '/api/employees' && req.method === 'GET') return reply(employees);
if (req.method === 'GET') {
const employee = employees.find(e => e.id === id);
return employee ? reply(employee) : fail(404, 'Employee not found.');
}
if (req.method === 'DELETE') {
employees = employees.filter(e => e.id !== id);
return reply(null);
}
return fail(404, 'Not Found');
}
function reply(body: unknown) {
return of(new HttpResponse({ status: 200, body })).pipe(delay(250));
}
function fail(status: number, message: string) {
return timer(250).pipe(mergeMap(() => throwError(() => new HttpErrorResponse({ status, error: { message } }))));
}
```
Open an employee, delete them, and see that the list has one employee less. (The practice block deletes without asking, to keep it short.)
## API Integration
`EmployeeApiService` contains every request for employees. It reads the server address from the environment file:
```ts
@Injectable({ providedIn: 'root' })
export class EmployeeApiService {
private http = inject(HttpClient);
private url = `${environment.apiUrl}/api/employees`;
getAll() { return this.http.get(this.url); }
getOne(id: number) { return this.http.get(`${this.url}/${id}`); }
create(employee: NewEmployee) { return this.http.post(this.url, employee); }
update(employee: Employee) { return this.http.put(`${this.url}/${employee.id}`, employee); }
delete(id: number) { return this.http.delete(`${this.url}/${id}`); }
}
```
- `NewEmployee` is `Omit`: a new employee has no id yet. The server creates it.
- The interceptor adds the token, so the service does not need to know about authentication.
## Error Handling
The app handles errors at three levels:
1. **Requests:** the store catches HTTP errors and turns the status code into a clear message with `messageFor()`. The list shows the message with a **Try again** button.
2. **Forms:** server errors such as **409** ("This email is already used.") appear under the form.
3. **Everything else:** `AppErrorHandler` replaces `ErrorHandler`, writes the error to the console and shows a banner at the top of the app.
```ts
export function messageFor(err: HttpErrorResponse, fallback: string) {
if (err.status === 0) return 'Could not reach the server. Is "npm run api" running?';
if (err.status === 403) return 'Only administrators can do this.';
return err.error?.message ?? fallback;
}
```
```angular runnable title="Loading and error states with Try again"
import { ApplicationConfig, Component, inject, signal } from '@angular/core';
import {
HttpClient, HttpErrorResponse, HttpHandlerFn, HttpRequest, HttpResponse,
provideHttpClient, withInterceptors,
} from '@angular/common/http';
import { delay, finalize, mergeMap, of, throwError, timer } from 'rxjs';
export const appConfig: ApplicationConfig = {
providers: [provideHttpClient(withInterceptors([practiceServer]))],
};
@Component({
selector: 'app-root',
template: `
@if (loading()) {
Loading employees...
} @else if (error()) {
⚠ {{ error() }}
} @else {
{{ count() }} employees loaded.
}
`,
})
export class App {
private http = inject(HttpClient);
loading = signal(false);
error = signal('');
count = signal(0);
constructor() {
this.load();
}
toggleServer() {
serverDown = !serverDown;
}
load() {
this.loading.set(true);
this.error.set('');
this.http
.get('/api/employees')
.pipe(finalize(() => this.loading.set(false)))
.subscribe({
next: list => this.count.set(list.length),
error: (err: HttpErrorResponse) => this.error.set(`Could not load the employees (${err.status}).`),
});
}
}
// ─── Practice server ──────────────────────────────────────────────
// Answers the employees API inside the browser, like in the API Integration lesson.
let employees = [
{ id: 1, name: 'Asha Rao', department: 'Engineering', position: 'Frontend Developer', active: true },
{ id: 2, name: 'Ravi Kumar', department: 'Engineering', position: 'Backend Developer', active: true },
{ id: 3, name: 'Meena Iyer', department: 'Design', position: 'UX Designer', active: true },
{ id: 4, name: 'John Peter', department: 'Sales', position: 'Account Manager', active: false },
];
let serverDown = false;
function practiceServer(req: HttpRequest, next: HttpHandlerFn) {
if (serverDown) return fail(500, 'Internal Server Error');
const id = Number(req.url.split('/')[3]);
if (req.url === '/api/employees' && req.method === 'GET') return reply(employees);
if (req.method === 'GET') {
const employee = employees.find(e => e.id === id);
return employee ? reply(employee) : fail(404, 'Employee not found.');
}
if (req.method === 'DELETE') {
employees = employees.filter(e => e.id !== id);
return reply(null);
}
return fail(404, 'Not Found');
}
function reply(body: unknown) {
return of(new HttpResponse({ status: 200, body })).pipe(delay(250));
}
function fail(status: number, message: string) {
return timer(250).pipe(mergeMap(() => throwError(() => new HttpErrorResponse({ status, error: { message } }))));
}
```
Tick **Server is down**, then click **Reload**. Untick it and click **Try again**.
## Performance Optimization
The project uses the techniques from the Performance Optimization lesson:
- **Lazy loading:** the employee section is a separate file, loaded after login with `loadChildren`. The login page loads faster.
- **`OnPush`** in every component. All data comes from signals and inputs, so no update is missed.
- **Computed signals** for the filtered list and the counters, instead of methods in templates.
- **`track employee.id`** in the table, so a reload keeps the existing rows.
- **Store updates after saving**, instead of loading the whole list again.
Run `npm run build` in the downloaded project. The output shows the employee section under **Lazy chunk files**, separate from the main bundle.
## Final Review
One user journey through the whole app.
Check your understanding of the whole app with these questions:
- **Where is the employee list stored?** In `EmployeeStore`, in a private signal.
- **Who sends the token?** `authInterceptor`, for every request.
- **What stops a viewer from deleting an employee?** The server answers 403. The UI also hides the button and the guard blocks the edit page.
- **What happens when the token expires?** The timer calls `logout()`, and the login page shows "Your session has expired".
- **What happens when the server is down?** The list shows a clear message with **Try again**.
Ideas to extend the project on your own:
- Add **pagination** to the employee list.
- Add a **dashboard** page with counts per department, using computed signals.
- Add a **"My profile"** page for viewers.
## Download Project Files
### Download Employee Management Project Source Code
Download angular-employee-management.zip
The ZIP file contains the complete project: the Angular app and the Node.js API server, which needs no extra packages.
| Folder | What it contains |
|---|---|
| `server/` | Login with JWT, and the employee API with role checks |
| `src/app/auth/` | `AuthService`, interceptor and guards |
| `src/app/core/` | The global error handler and the error banner |
| `src/app/shared/` | `PageHeader`, `StatusBadge` and `SearchBox` |
| `src/app/employees/` | Model, API service, store, list, details, form, validator and lazy routes |
| `src/app/pages/` | Login, access denied and not found |
### Project Setup Instructions
You need **Node.js 20.19 or newer**.
1. Unzip the file and open a terminal in the `employee-management` folder.
2. Install the packages:
```bash
npm install
```
3. Start the API server on `http://localhost:3000`. Keep this terminal open:
```bash
npm run api
```
4. In a second terminal, start the Angular app:
```bash
npm start
```
5. Open `http://localhost:4200` and log in:
| Email | Password | Role |
|---|---|---|
| admin@company.com | Admin123! | HR admin: view, add, edit, delete |
| viewer@company.com | Viewer123! | Viewer: view only |
To test automatic logout, start the API with `npm run api:short` instead. Tokens then expire after 30 seconds.
## Common Mistakes
| Mistake | What you see | Fix |
|---|---|---|
| Components call `HttpClient` directly | Request code is repeated, and pages show different data | Use the API service and the store |
| `:id` route listed before `new` | `/employees/new` opens the details page for the id "new" | List `new` before `:id` |
| Only hiding buttons for viewers | Viewers can still change data with direct API calls | Check the role on the server too |
| Loading the whole list after every save | Slow pages and extra requests | Update the store's signal with the saved employee |
| No `markAllAsTouched()` on save | An invalid form shows no messages | Call it when the form is invalid |
## Check Yourself
## Exercises
## What to Remember
- Organize a real app by feature: models, API services, a signal store, components and lazy-loaded routes. Data flows from components to the store, to the API service, to the server.
- Combine authentication (JWT, interceptor) with authorization in three places: guards, templates and the server.
- Use reactive forms with built-in and custom validators, handle errors at every level, and keep the app fast with lazy loading, `OnPush`, computed signals and `track`.
Next: **Cheat Sheet**, a short reference of everything in this course.