Implementing Dynamic Item Highlighting with Angular Effects

This challenge focuses on implementing a common UI pattern: dynamically highlighting items in a list based on user interaction or data changes. We'll leverage Angular's powerful RxJS integration to create a clean and reactive solution using effects.

Problem Description

You need to build a component that displays a list of items. When a user clicks on an item, it should be highlighted for a specified duration. After the duration, the highlighting should automatically disappear. This effect should be managed reactively.

Key Requirements:

• Display a list of strings.
• Each item should have a click handler.
• Clicking an item should apply a "highlight" CSS class to it.
• The highlight should persist for 3 seconds.
• After 3 seconds, the "highlight" class should be removed.
• If an item is clicked again while it's already highlighted, the timer should reset, and it should remain highlighted for another 3 seconds.
• The solution should use Angular's effect mechanism (likely via RxJS operators like tap, delay, switchMap, mergeMap etc., conceptually similar to Redux-like effects) to manage the highlight state.

Expected Behavior:

When a user clicks on an item, it visually changes (e.g., background color changes) for 3 seconds. If they click another item during this time, the previous item's highlight fades, and the new item becomes highlighted.

Edge Cases:

• Clicking an item that is not currently highlighted.
• Clicking an item that is already highlighted.
• Rapidly clicking multiple items.

Examples

Example 1:

Input:
List of items: ["Apple", "Banana", "Cherry"]

User interaction: Clicks "Apple".

Output:
"Apple" is displayed with a "highlight" CSS class.
After 3 seconds, the "highlight" class is removed from "Apple".

Example 2:

Input:
List of items: ["Apple", "Banana", "Cherry"]

User interaction: Clicks "Apple", then within 1 second clicks "Banana".

Output:
Initially, "Apple" is highlighted.
After "Banana" is clicked, "Apple" highlight is removed (or fades immediately).
"Banana" becomes highlighted.
After 3 seconds from clicking "Banana", the "highlight" class is removed from "Banana".

Example 3:

Input:
List of items: ["Apple", "Banana", "Cherry"]

User interaction: Clicks "Apple", then clicks "Apple" again before the 3 seconds are up.

Output:
"Apple" is highlighted.
When "Apple" is clicked again, the 3-second timer resets.
"Apple" remains highlighted for a total of 3 seconds from the *second* click.

Constraints

• The list of items will contain at least one item and at most 50 items.
• The item names will be strings consisting of alphanumeric characters.
• The highlighting duration is fixed at 3000 milliseconds (3 seconds).
• The solution should be implemented within a single Angular component.
• Avoid imperative DOM manipulation for applying/removing classes; use Angular's binding mechanisms.

Notes

• Think about how to manage the state of which item is currently highlighted. RxJS operators are your friend here.
• Consider using a Subject or BehaviorSubject to emit click events.
• The delay and switchMap operators are particularly useful for managing timed effects and canceling previous ones.
• You'll need a way to track which item is currently selected for highlighting.