Fetching User Data with Angular HttpClient

This challenge focuses on a fundamental task in modern web development: making HTTP requests to retrieve data from a backend API. You will implement a service in Angular that fetches a list of users from a public API and displays this data in a component. This skill is crucial for building dynamic and interactive applications.

Problem Description

Your task is to create an Angular application that retrieves a list of users from the JSONPlaceholder API. You will need to:

1. Create an Angular Service: This service will be responsible for making the HTTP GET request to the API.
2. Implement the GET Request: Use Angular's HttpClient to fetch data from https://jsonplaceholder.typicode.com/users.
3. Create an Angular Component: This component will subscribe to the service's observable to get the user data and then display it in a user-friendly format.
4. Display User Data: Render the fetched user information (e.g., name, email, phone) in your component's template.

Key Requirements:

• The service should return an Observable of an array of user objects.
• The component should handle the asynchronous nature of the HTTP request.
• Error handling for the HTTP request should be considered (though a basic implementation is sufficient for this challenge).
• The displayed data should be clear and easy to read.

Expected Behavior:

Upon loading the component, a GET request will be made to the specified API endpoint. Once the data is successfully retrieved, the names and emails of all users will be displayed in a list within the component's view. If an error occurs during the request, a message should be displayed indicating the failure.

Edge Cases:

• What happens if the API returns an empty array?
• What happens if the API request times out or fails?

Examples

Example 1:

Input: (Implicit - The component is loaded in the browser)

Output: A list displayed in the HTML, showing names and emails of users. For instance:

User List:
- John Doe: john.doe@example.com
- Jane Smith: jane.smith@example.com
- ... (and so on for all users from the API)

Explanation: The Angular component triggers a GET request via its service. The HttpClient successfully fetches data from the JSONPlaceholder API. The component then iterates through the received array of user objects and displays their name and email properties.

Example 2:

Input: (API returns an empty array of users)

Output: A message indicating that no users were found.

No users found.

Explanation: The GET request is successful, but the API returns an empty array. The component's logic detects this and displays a "No users found" message instead of an empty list.

Example 3:

Input: (Network error occurs, API is unreachable)

Output: An error message is displayed in the HTML.

Error fetching users: Failed to fetch

Explanation: The GET request fails due to a network issue. The catchError operator in the service (or the component's subscription) intercepts the error and displays a user-friendly error message.

Constraints

• You must use Angular's HttpClientModule and HttpClient service.
• The solution should be implemented in TypeScript.
• The JSONPlaceholder API (https://jsonplaceholder.typicode.com/users) should be used as the data source.
• Assume a stable internet connection for successful data retrieval.

Notes

• Remember to import HttpClientModule into your AppModule (or the relevant feature module) to make HttpClient available.
• Consider using RxJS operators like map and catchError for data transformation and error handling within your service.
• The structure of a user object from the JSONPlaceholder API is important. You can inspect it by visiting the URL directly in your browser.
• For displaying the data, a simple unordered list (<ul>) with list items (<li>) is a good starting point.