User Management system Angular | angular 18 Projects

Introduction

In this tutorial, we will create a User Management system using Angular 18 integrated with a .NET API. This application will have two main roles: Admin and User. The Admin can manage users — creating, editing, and deleting them — while Users can only view their details and upload their profile pictures. This project will guide you through setting up the Angular application and implementing the necessary features step-by-step.

Step 1: Set Up the Angular Project

1. Create a New Angular Project:

   • Use the Angular CLI to create a new project:

     ng new user-management-app
     

   • Navigate into the project folder:

     cd user-management-app
     

2. Install Bootstrap:

   • Install Bootstrap using npm:

     npm install bootstrap
     

   • Add Bootstrap to your angular.json file under the styles array:

     "styles": [
       "src/styles.css",
       "node_modules/bootstrap/dist/css/bootstrap.min.css"
     ]
     

3. Set Up Routing:

   • Create a routing module if not already present, and set up routes for Login, User List, Create User, and Layout components.

Step 2: Create Required Components

1. Generate Components:

   • Use Angular CLI to create the following components:

     ng generate component components/Login
     ng generate component components/Layout
     ng generate component components/UserList
     ng generate component components/CreateUser
     

2. Set Up Component Structure:

   • Ensure the Layout component contains a router outlet to load child components based on user roles.

Step 3: Implement User Login

1. Design Login UI:

   • Create a login form in the Login component HTML file with fields for email and password.

2. Handle Login Logic:

   • Create a service to handle API calls. For login, create a method to call the login API:

     login(email: string, password: string) {
       return this.httpClient.post('API_URL/login', { email, password });
     }
     

3. Bind Form Data:

   • Use Angular's two-way binding (ngModel) to bind form inputs to a login object in the component.

4. Navigate Based on Role:

   • After successful login, check the user’s role and navigate accordingly (to User List for Admin or Create User for User).

Step 4: Implement User Management for Admin

1. Display User List:

   • In the UserList component, fetch the list of users from the API and display them in a table.

2. Add Create User Functionality:

   • Include a button to navigate to the CreateUser component where new users can be added.

3. Handle User Creation:

   • Create a form in the CreateUser component to capture user details. On submission, call the API to create the user.

4. Implement Edit and Delete Functions:

   • For each user in the list, provide Edit and Delete buttons.
     • Edit: Navigate to the CreateUser component with the user ID to populate the form with existing data.
     • Delete: Confirm deletion and call the delete API.

Step 5: Implement User Profile for Regular Users

1. User Dashboard:

   • After login, regular users should be directed to the CreateUser component where they can view and update their profile.

2. Display User Information:

   • Fetch the logged-in user's data from the API and display it in the form, allowing them to upload a profile picture.

3. Handle Profile Updates:

   • When submitting the form, call the update API to save changes.

Conclusion

In this tutorial, we successfully built a User Management system with Angular 18 and a .NET API. We implemented role-based access, allowing admins to manage users while restricting regular users to their profiles.

Key Takeaways:

• Set up Angular with Bootstrap for styling.
• Create components and services to handle user authentication and management.
• Implement routing for a smooth user experience.
• Use Angular's reactive features (like ngModel) to manage form data easily.

Next Steps:

• Explore adding additional features like user roles management, better error handling, and user notifications.
• Deploy the application to a web server for real-world usage.