This project demonstrates the use of AG Grid with Angular for managing employee data. The application supports adding, editing, and deleting employees and their skills, with server-side pagination and data management. It also uses the server-side row model with a master-detail table.
Watch the following demo video to see the application in action:
AgGrid.CRUD.mp4
- ✅ Employee Management
- ✅ Skill Management
- ✅ Server-Side Pagination
- ✅ Data Persistence
- ✅ Master-Detail Table
- ✅ Server-Side Row Model
- ✅ Add Row
- ✅ Delete Row
- ✅ Delete Nested Row
- Sorting
- Filtering
- Editing Rows
- Partial Highlight Rows (When some of the skills are deleted)
- Pinning Deleted and Newly Added Rows (Wishlist)
The main branch extends the functionality of the client-side branch to include server-side data management, including:
- Server-side pagination.
- Integration with a mock backend server for data fetching and updates.
- Server-side row model with master-detail table.
The client-side branch contains the core functionality of the application, including:
- Displaying employee data in an AG Grid table.
- Adding new employees.
- Editing existing employees.
- Deleting employees.
- Managing employee skills.
- Client-side data management.
To start a local development server, run:
ng serveOnce the server is running, open your browser and navigate to http://localhost:4200/. The application will automatically reload whenever you modify any of the source files.
To build the project, run:
ng buildThis will compile your project and store the build artifacts in the dist/ directory. By default, the production build optimizes your application for performance and speed.
For more information on using AG Grid with Angular, visit the AG Grid Documentation.
For more information on using the Angular CLI, including detailed command references, visit the Angular CLI Overview and Command Reference page.