Angular Animated List: Dynamic Item Transitions

This challenge focuses on implementing dynamic animations in Angular using Angular's built-in animation system. You'll be creating a component that displays a list of items and animates the addition and removal of items from the list, providing a smooth and engaging user experience. This is a common requirement in modern web applications and demonstrates a core Angular capability.

Problem Description

You are tasked with building an Angular component called AnimatedListComponent that displays a list of strings. The component should allow the user to add and remove items from the list. When an item is added or removed, a visual animation should play, smoothly transitioning the item into or out of the list. The animation should involve a fade-in/fade-out effect and a slight vertical slide.

Key Requirements:

• Display List: The component must display the list of strings in an ordered manner (e.g., using *ngFor).
• Add Item: A button should be provided to add a new, unique string to the end of the list.
• Remove Item: Each list item should have a button to remove itself from the list.
• Animation: When an item is added, it should fade in and slide up from the bottom. When an item is removed, it should fade out and slide down to the bottom.
• Unique Items: Ensure that newly added items have unique values. If the user tries to add a duplicate, display a brief error message (e.g., in the console) and do not add the item.
• State Management: The list of items should be managed within the component's TypeScript class.

Expected Behavior:

• The component should initially render with an empty list.
• Clicking the "Add Item" button should add a new string to the list and trigger the animation.
• Clicking the "Remove" button next to an item should remove the item from the list and trigger the animation.
• The animations should be visually appealing and performant.
• Duplicate item additions should be prevented.

Examples

Example 1:

Input: Initial list: []; User clicks "Add Item" with input "Apple".
Output: List: ["Apple"]; Animation: "Apple" fades in and slides up.
Explanation: A new item "Apple" is added to the list, triggering the add animation.

Example 2:

Input: List: ["Apple", "Banana"]; User clicks "Remove" next to "Banana".
Output: List: ["Apple"]; Animation: "Banana" fades out and slides down.
Explanation: "Banana" is removed from the list, triggering the remove animation.

Example 3:

Input: List: ["Apple", "Banana"]; User clicks "Add Item" with input "Apple".
Output: List: ["Apple", "Banana"]; Console: "Duplicate item detected. Item not added."
Explanation: The user attempts to add a duplicate item. The item is not added, and an error message is logged.

Constraints

• Angular Version: Use Angular 16 or later.
• Animation Approach: Utilize Angular's @keyframes and trigger syntax for animations. Avoid external animation libraries.
• Performance: Animations should be smooth and not negatively impact the application's performance. Keep the animation complexity reasonable.
• Unique Item Generation: The added items should be unique. For simplicity, you can generate unique strings using a simple counter or timestamp.
• Input Field: The "Add Item" button should be accompanied by an input field where the user can enter the new item's text.

Notes

• Consider using Angular's ngClass or ngStyle to apply animation classes dynamically.
• The animation trigger should be associated with the list item element.
• Think about how to handle the animation state (e.g., using a boolean variable to indicate whether an item is being added or removed).
• Focus on creating a clean and maintainable component structure.
• The error message for duplicate items should be logged to the console, not displayed on the screen.
• The slide distance and fade duration are up to your discretion, but should be visually pleasing.