Angular Staggered List Animation

Creating visually appealing and engaging user interfaces often involves subtle animations. This challenge focuses on implementing a staggered list animation in an Angular application, where elements fade in with a slight delay, creating a dynamic and eye-catching effect. This is useful for displaying lists of items, loading data, or highlighting new content.

Problem Description

You are tasked with creating an Angular component that displays a list of items and animates their appearance using a staggered fade-in effect. The component should take an array of data as input and render each item in a list. When the component is initialized or the data changes, each item should fade in sequentially, with a specified delay between each item's appearance. The animation should be smooth and visually appealing.

Key Requirements:

Data Input: The component should accept an array of data as input. Each element in the array represents an item to be displayed in the list.
Staggered Fade-In: Each item should fade in from opacity 0 to 1 with a delay.
Delay Customization: The delay between each item's fade-in should be configurable via an input property.
Angular Animations: Utilize Angular's animation capabilities to achieve the staggered effect.
Dynamic Updates: The animation should re-trigger smoothly when the input data changes.

Expected Behavior:

When the component is initialized or the input data changes, the list should be cleared.
Each item in the list should fade in sequentially, starting from opacity 0.
The fade-in duration and delay between items should be controlled by the configured input properties.
The animation should be performant and not cause noticeable lag.

Edge Cases to Consider:

Empty Input Array: The component should handle an empty input array gracefully, without attempting to animate non-existent items.
Large Datasets: Consider the performance implications of animating a very large list. While not a primary focus, avoid solutions that would cause significant performance issues with hundreds of items.
Data Updates: The animation should smoothly re-trigger when the input data changes, without abrupt transitions.

Examples

Example 1:

Input: data = ['Item 1', 'Item 2', 'Item 3'] , delay = 100ms
Output:  'Item 1' fades in after 0ms, 'Item 2' after 100ms, 'Item 3' after 200ms.
Explanation:  The items fade in sequentially with a 100ms delay between each.

Example 2:

Input: data = ['Apple', 'Banana', 'Cherry', 'Date'] , delay = 250ms
Output: 'Apple' fades in after 0ms, 'Banana' after 250ms, 'Cherry' after 500ms, 'Date' after 750ms.
Explanation:  The items fade in sequentially with a 250ms delay between each.

Example 3: (Edge Case)

Input: data = [], delay = 500ms
Output:  An empty list is displayed. No animation occurs.
Explanation:  The component handles the empty array case gracefully.

Constraints

Delay Range: The delay input property should accept values between 0ms and 1000ms (inclusive).
Fade Duration: The fade duration should be fixed at 300ms. This simplifies the challenge and focuses on the staggering aspect.
Performance: The animation should be performant and not cause noticeable lag, even with a list of up to 50 items.
Angular Version: Assume Angular version 14 or higher.

Notes

Consider using Angular's trigger, state, and transition features to define the animation.
The *ngFor directive can be used to iterate over the input data and render the list items.
Think about how to efficiently trigger the animation when the input data changes. Using trackBy in *ngFor can help Angular identify which items have changed.
Focus on creating a clean and maintainable component.
The visual appearance of the items themselves is not part of this challenge; focus solely on the staggered fade-in animation.