Animated List in Angular

This challenge focuses on implementing a visually appealing animation when adding or removing items from a list in an Angular application. Animating list changes provides a smoother user experience and enhances the perceived responsiveness of the application. You'll be using Angular's built-in animation capabilities to achieve this.

Problem Description

You are tasked with creating an Angular component that displays a list of items. When a new item is added to the list, it should smoothly slide in from the top. When an item is removed from the list, it should smoothly slide out to the bottom. The animation should be visually consistent and not jarring.

Key Requirements:

Component Structure: Create a simple Angular component with a list of strings.
Add Item: Implement a button that adds a new string to the list. The new item should slide in from the top with a duration of 300ms.
Remove Item: Implement a button next to each list item that removes that item from the list. The removed item should slide out to the bottom with a duration of 300ms.
Animation Trigger: Utilize Angular's @animate trigger to define the slide-in and slide-out animations.
State Management: Use Angular's *ngFor directive to iterate over the list and display the items. The animation trigger should be tied to the item's presence in the list.
Visual Consistency: Ensure the animations are smooth and visually appealing.

Expected Behavior:

Adding an item: The new item appears with a slide-in animation from the top.
Removing an item: The item disappears with a slide-out animation to the bottom.
The list should update dynamically as items are added or removed.
The animations should not block the UI thread.

Edge Cases to Consider:

Empty List: The component should handle an empty list gracefully. No errors should occur.
Rapid Additions/Removals: Consider how the animations behave when items are added or removed in quick succession. While perfect synchronization isn't required, avoid overlapping animations that look chaotic.

Examples

Example 1:

Input: Initial list: ["Item 1", "Item 2", "Item 3"]. User clicks "Add Item".
Output: List becomes: ["Item 1", "Item 2", "Item 3", "Item 4"]. "Item 4" slides in from the top.
Explanation: A new item is added to the list, triggering the slide-in animation.

Example 2:

Input: List: ["Item 1", "Item 2", "Item 3"]. User clicks the "Remove" button next to "Item 2".
Output: List becomes: ["Item 1", "Item 3"]. "Item 2" slides out to the bottom.
Explanation: An item is removed from the list, triggering the slide-out animation.

Example 3:

Input: List is initially empty. User clicks "Add Item" multiple times in rapid succession.
Output: Each new item slides in from the top sequentially, with a slight delay between each animation.
Explanation: Handles rapid additions without errors, allowing animations to play out.

Constraints

Animation Duration: The slide-in and slide-out animations should have a duration of 300ms.
Animation Direction: Slide-in from the top, slide-out to the bottom.
Angular Version: Use Angular version 14 or higher.
Performance: The animations should not significantly impact the application's performance. Avoid complex calculations within the animation trigger.
Input Format: The list items are strings.

Notes

Consider using Angular's trigger and state decorators to define your animations.
The *ngFor directive is crucial for dynamically rendering the list items and triggering the animations.
Think about how to efficiently manage the list data and update the view.
You can use CSS transitions or Angular's animation library to define the animation styles. Angular's animation library is preferred for more complex animations.
Focus on creating a clean and maintainable component. Properly structure your code and use meaningful variable names.