Dynamic Data Selection with Props in Angular

This challenge focuses on building a reusable Angular component that can display data from a provided list based on a configurable selector mechanism. You will implement a component that accepts a list of items and a "selector function" as input, allowing the consumer to dynamically determine which item from the list should be displayed. This is a common pattern for creating flexible and data-driven UI elements.

Problem Description

You need to create an Angular component, let's call it DynamicDisplayComponent, that takes two primary inputs:

1. items: An array of any type of data.
2. selector: A function that receives the items array and a current "state" or "key" (which will also be an input to the component) and returns the index of the item to be displayed from the items array.

The DynamicDisplayComponent should render the item at the index returned by the selector function. You'll also need to handle cases where the selector function might return an invalid index.

Key Requirements:

• Create a component DynamicDisplayComponent that accepts @Input() properties: items and selector.
• The selector function signature should be (items: any[], key: any) => number. It takes the items array and a key and returns the index of the item to display.
• The component should also accept an @Input() property key which will be passed to the selector function.
• The component should display the selected item. For simplicity, assume the items are strings or have a simple toString() method.
• Implement basic error handling for invalid indices returned by the selector.

Expected Behavior:

• When items and key are provided, and the selector function returns a valid index within the bounds of items, the component should display the item at that index.
• If the selector returns an index less than 0 or greater than or equal to items.length, or if items is empty, the component should display a default message like "No item selected." or "Invalid selection.".
• The component should re-render if items, key, or selector changes.

Edge Cases:

• items array is empty.
• selector function returns an index outside the valid range of items.
• key input is not provided or is of an unexpected type for the selector function.

Examples

Example 1:

Input:

• DynamicDisplayComponent inputs:
  • items: ['Apple', 'Banana', 'Cherry']
  • key: 'B'
  • selector: (items, key) => items.findIndex(item => item.startsWith(key))

Output:

<p>Banana</p>

Explanation: The selector function finds the index of the first item starting with 'B', which is 'Banana' at index 1. The component displays this item.

Example 2:

Input:

• DynamicDisplayComponent inputs:
  • items: [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }]
  • key: 2
  • selector: (items, key) => items.findIndex(item => item.id === key)

Output:

<p>Bob</p>

Explanation: The selector function finds the index of the item with id equal to 2, which is 'Bob' at index 1. The component displays this item.

Example 3: (Edge Case - Invalid Selection)

Input:

• DynamicDisplayComponent inputs:
  • items: ['Dog', 'Cat']
  • key: 'Z'
  • selector: (items, key) => items.findIndex(item => item.startsWith(key))

Output:

<p>Invalid selection.</p>

Explanation: The selector function returns -1 because no item starts with 'Z'. The component displays the "Invalid selection." message.

Constraints

• The items array can contain up to 1000 elements.
• The key input can be of any primitive type (string, number, boolean) or null/undefined.
• The selector function is assumed to be a pure function and should not have side effects.
• The component should aim for efficient re-rendering by Angular's change detection.

Notes

• Consider using OnChanges lifecycle hook to detect changes in inputs if necessary, though Angular's default change detection will likely handle most cases.
• The selector function is where the dynamic logic resides. Think about how different key types and items structures might influence its implementation.
• For displaying the selected item, you can use string interpolation {{ selectedItem }} in your template. Ensure you handle the case where selectedItem might be null or undefined before rendering.
• This challenge is designed to be implemented as a standalone component.