Angular Service Providers: Data Management and Sharing

Angular services are fundamental for managing data and sharing logic across components. This challenge focuses on creating and utilizing Angular providers (services) to encapsulate data and functionality, demonstrating dependency injection and promoting code reusability. You'll build a simple data provider to manage a list of items and expose methods to interact with that list.

Problem Description

You are tasked with creating an Angular service called ItemService that manages a list of strings. This service should:

1. Initialize: The service should initialize with a predefined list of strings (e.g., ["Apple", "Banana", "Orange"]).
2. Get Items: Provide a method getItems() that returns the current list of strings.
3. AddItem: Provide a method addItem(item: string) that adds a new string to the list.
4. RemoveItem: Provide a method removeItem(item: string) that removes a string from the list. If the item isn't present, the list should remain unchanged.
5. Component Integration: Create a simple Angular component called ItemListComponent that injects the ItemService and displays the list of items. The component should also include buttons to add and remove items, which call the corresponding methods on the injected ItemService.

The goal is to demonstrate how to create a reusable service, inject it into a component, and use it to manage data and perform actions. This is a core concept in Angular development for building modular and maintainable applications.

Examples

Example 1:

Input: Initial list: ["Apple", "Banana", "Orange"], addItem("Grape"), removeItem("Banana")
Output: ["Apple", "Orange", "Grape"]
Explanation: "Grape" is added to the list, and "Banana" is removed.

Example 2:

Input: Initial list: ["Apple", "Banana", "Orange"], addItem("Apple"), removeItem("Apple")
Output: ["Banana", "Orange"]
Explanation: "Apple" is added, then the first instance of "Apple" is removed.

Example 3: (Edge Case)

Input: Initial list: ["Apple", "Banana", "Orange"], removeItem("Grape")
Output: ["Apple", "Banana", "Orange"]
Explanation: "Grape" is not in the list, so the list remains unchanged.

Constraints

• The ItemService must be a standard Angular service (using @Injectable()).
• The ItemListComponent must correctly inject and utilize the ItemService.
• The addItem and removeItem methods in ItemService should modify the internal list directly.
• The component's display should update dynamically whenever the list of items changes.
• The initial list of items should be hardcoded within the ItemService.
• The component should display the items in a simple, readable format (e.g., an unordered list).

Notes

• Consider using EventEmitter in the component if you want to trigger events when the list changes (though this is not strictly required for this challenge).
• Focus on the core concepts of service creation, dependency injection, and data management.
• Ensure your code is well-structured and follows Angular best practices.
• You don't need to implement complex styling or error handling for this challenge. The focus is on the functionality of the service and component interaction.
• You can use any Angular version (e.g., Angular 14+).