Angular 17 & NET Core 8: Talent Management SPA Online Demo
Appendix B
Introduction
This is Appendix B in our comprehensive series “Building a Talent Management SPA with Angular 17 and NET Core 8”. In this appendix, we showcase the sophisticated capabilities of this application, with a particular focus on features. For a broader view of the series and to access other parts, you can refer back to the series’ table of contents, where each segment is meticulously organized to guide you through every stage of building a robust Talent Management SPA.
Content
Welcome to the demonstration of the Talent Management Single Page Application, developed using Angular 17 and .NET Core 8. I’m excited to showcase the sophisticated capabilities of this application, with a particular focus on Employee and Position management features. Check out the YouTube video below for more details.
Part 1 — Employee Listing feature
First, let’s delve into the Employee menu. This screen under this menu allows you to search for employees, as well as sort and paginate through your entire workforce. This functionality facilitates easy access and efficient management of employee records.
Demonstrating Employee Search, Sort, and Pagination
As I type in a Search box, notice the instantaneous, dynamic listing of employees. I can effortlessly sort this list by various criteria like name, email, Employee Number, or Position Title. The pagination feature here ensures smooth navigation through large datasets, making it highly user-friendly.
Showing Drill Down to Employee Details
When clicking on an employee row, a detailed modal instantly appears. This modal provides a comprehensive view of the employee’s profile, including contact information such as Name, Title, Phone, and Birthday, all without leaving the page.
Part 2 — Position Listing
Let’s shift the focus to the Position Listing feature. But first, pay attenton to a key security aspect. Accessing this section requires a login. It’s essential for maintaining confidentiality and control within your organization. The login accounts are listed on the Home page.
Demonstrating the Login Process
Click on the Position menu and notice the prompt for user credentials. This application ensures that only authorized personnel, specifically those in the HR Admin or Manager roles, can view and manage position-related information. Let’s log in with an HR Admin account (ashtyn1, Pa$$word123).
Logged in and Accessing Position Search Feature
Once logged in, I gain full access to the Position Search feature. Here, users in HR Admins and Managers roles (Role Based Access Control, aka RBAC) can seamlessly search, sort, and paginate through positions, as well as perform crucial CRUD operations.
Demonstrating Position Search, Sort, and Pagination
Like with employees, I can search for positions, sort the results, and navigate through pages. The responsiveness and ease of use remain consistent, providing an efficient user experience.
Showcasing CRUD Operations for Position
Let’s create a new position. Click on Add button. Input the necessary details and save. The position is now part of our searchable database. Similarly, updating or deleting existing positions is just as intuitive and straightforward.
Links to Online Demo
Angular Client: Dive into the dynamic world of Talent Management with our Angular Client and Web API. Experience hands-on management with our Angular 17 and Bootstrap 5-powered Angular Client at https://workcontrolgit.github.io/TalentManagement-Client-Angular, offering a user-friendly and interactive platform.
NetCore Web API: For backend insights, explore our comprehensive Web API at https://talentmanagementwebapi.azurewebsites.net/swagger/index.html. Hosted on Azure with detailed Swagger documentation, it simplifies the understanding of server-side operations. These integrated tools provide a complete view of the Talent Management system, showcasing the seamless synergy between front-end and back-end technologies.
Summary
If you’re eager to get hands-on, I have great news! The source code for this Talent Management SPA is available for download on GitHub. You can clone and run the application on your local host, explore its features in detail, and even use it as a starting point for your projects.
- Angular source code https://github.com/workcontrolgit/TalentManagement-Client-Angular
- NET Core WebAPI source code https://github.com/workcontrolgit/TalentManagementApi
