Fetching Data with GET Requests in Angular

This challenge focuses on implementing a GET request in an Angular application to retrieve data from a remote API. Understanding how to fetch data is fundamental to building dynamic and interactive web applications, and this exercise will solidify your knowledge of Angular's HttpClient module.

Problem Description

You are tasked with creating an Angular component that fetches a list of users from a public API and displays them on the screen. The API endpoint is https://jsonplaceholder.typicode.com/users. Your component should:

1. Fetch Data: Use Angular's HttpClient to make a GET request to the specified API endpoint.
2. Handle Response: Successfully retrieve the data (an array of user objects) from the API response.
3. Display Data: Iterate through the retrieved user data and display each user's name and email in a simple list format within the component's template.
4. Handle Errors: Implement error handling to gracefully manage potential network errors or API failures. Display an appropriate error message to the user if the request fails.
5. Loading State: Provide visual feedback to the user while the data is being fetched (e.g., a loading spinner or message).

Expected Behavior:

Upon component initialization, the application should display a loading indicator. Once the data is successfully fetched, the loading indicator should disappear, and the list of users (name and email) should be displayed. If an error occurs during the request, an error message should be displayed instead of the user list.

Examples

Example 1:

Input:  Initial component load, API call to https://jsonplaceholder.typicode.com/users
Output:  A list displaying the names and emails of the users returned by the API.  For example:

Name: Leanne Graham
Email: Sincere@april.biz

Name: Antonette Carroll
Email: Shanna@hogan.com

...and so on for all users returned by the API.
Explanation: The component successfully fetches the user data and renders it in the template.

Example 2:

Input:  API endpoint returns an error (e.g., 500 Internal Server Error)
Output:  An error message displayed in the component's template, such as "Failed to fetch users. Please try again later."
Explanation: The component correctly handles the error and informs the user about the failure.

Example 3:

Input:  Network connection is unavailable.
Output:  An error message displayed in the component's template, such as "Network error. Please check your connection and try again."
Explanation: The component handles the network error and provides a user-friendly message.

Constraints

• API Endpoint: The API endpoint must be https://jsonplaceholder.typicode.com/users.
• Data Display: Only the name and email properties of each user object should be displayed.
• Error Handling: The error handling should provide a clear and informative message to the user.
• Angular Version: Assume you are using a recent version of Angular (v12 or higher).
• HttpClient: You must use Angular's HttpClient module for making the GET request.
• Performance: The solution should be reasonably performant. Avoid unnecessary computations or DOM manipulations.

Notes

• Remember to import the HttpClientModule in your Angular module.
• Use Observables to handle the asynchronous nature of the HTTP request.
• Consider using a loading indicator to provide feedback to the user while the data is being fetched.
• The jsonplaceholder.typicode.com API is a mock API and is generally reliable, but be prepared to handle potential errors.
• You can use a simple div or ul element to display the user data. The specific styling is not a requirement of this challenge.