Angular Service Creation: User Data Management

This challenge focuses on creating a fundamental Angular service to manage and retrieve user data. Services are a core concept in Angular for encapsulating reusable logic, especially for data fetching and manipulation, making your application more organized and maintainable.

Problem Description

You need to create an Angular service named UserService that will simulate fetching and managing a list of user objects. This service will be responsible for providing this user data to different components within your Angular application.

Key Requirements:

1. Service Creation: Create a new Angular service (UserService) using the Angular CLI.
2. Data Structure: Define an interface for your User object, which should at least include id (number) and name (string).
3. Data Storage: Internally, the UserService should maintain an array of User objects. For this challenge, you can initialize this array with some sample user data directly within the service.
4. Data Retrieval: Implement a method within the service (e.g., getUsers()) that returns the entire list of users. This method should return an Observable to simulate asynchronous data fetching, even though the data is hardcoded for this exercise.
5. Individual User Retrieval: Implement another method (e.g., getUserById(id: number)) that takes a user ID and returns a single User object that matches the provided ID. If no user is found, it should return undefined.
6. Service Injection: Ensure the UserService is injectable and can be provided at the root level.

Expected Behavior:

• When getUsers() is called, it should emit a stream containing the array of predefined user objects.
• When getUserById() is called with a valid user ID, it should emit a stream containing the corresponding user object.
• When getUserById() is called with an invalid user ID, it should emit a stream containing undefined.

Edge Cases:

• Handling requests for user IDs that do not exist in the dataset.

Examples

Example 1:

// In a component subscribing to UserService.getUsers()
Observable<User[]> emitted:
[
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" }
]

Explanation: The getUsers() method returns an Observable that emits the array of users.

Example 2:

// In a component subscribing to UserService.getUserById(1)
Observable<User | undefined> emitted:
{ id: 1, name: "Alice" }

Explanation: getUserById(1) successfully finds and returns the user with ID 1.

Example 3:

// In a component subscribing to UserService.getUserById(99)
Observable<User | undefined> emitted:
undefined

Explanation: getUserById(99) does not find a user with ID 99 and returns undefined.

Constraints

• The UserService should be provided in root.
• The getUsers() method must return an Observable<User[]>.
• The getUserById(id: number) method must return an Observable<User | undefined>.
• The sample user data should include at least 3 users.

Notes

• You'll need to import Observable from rxjs.
• Consider using of() from rxjs to create an Observable from your hardcoded data.
• Think about how you would handle this in a real-world scenario where data comes from an API (e.g., using HttpClient). While this challenge uses hardcoded data, the structure should mimic asynchronous behavior.