Angular Users App

This is a simple Angular application built as an assignment to demonstrate core Angular concepts including components, routing, directives, dynamic components, and API integration. The app fetches users from an API, displays them in a clean UI, and opens a dynamic user details modal.

---

📌 Features Implemented

✔ 1. Users List Page (/users)

• Fetches data from JSONPlaceholder API.
• Displays a vertically aligned list of users.
• Each user card shows:
  • Name (bold)
  • Email (light text)
  • “View Details” button on the right.
• Clicking “View Details” opens a dynamic modal.

✔ 2. Dynamic Modal (User Details)

• The modal is not statically added in HTML.
• Loaded using ViewContainerRef + createComponent() (as required).
• Shows selected user information: Name, Email, Username, Phone.
• Close button removes the modal.
• Modal route syncs with URL: /users/:id.

✔ 3. Routing (As required)

• /users → Shows list of users.
• /users/:id → Shows list + auto-opens modal for that user.
• /about → Simple About page.
• '' → Redirects to /users.
• ** → Redirects to /users.

✔ 4. API Integration

• Uses Angular HttpClient.
• UserService handles all requests.
• Includes loading & error handling.

🛠️ Tech Stack

• Angular 16.2.11 (or your version)
• TypeScript
• HTML + CSS
• JSONPlaceholder API

🚀 How to Run the Project

1️⃣ Clone the repository

git bash:

• git clone https://github.com/jiya2802/Angular-users-app.git
• cd Angular-users-app

2️⃣ Install dependencies

npm install

3️⃣ Run the development server

ng serve

4️⃣ Open in browser

http://localhost:4200

Assignment Requirements✓

Requirement	Status
Users list	✔ Completed
View Details popup	✔ Dynamic Component
Routing (/users, /user/:id)	✔ Implemented as /users/:id
API calls	✔ Handled
Directives	✔ Used (*ngFor, *ngIf, [ngStyle])
Clean UI	✔ Done
README with setup + description	✔ Provided

Screenshots