Implementing Custom Change Detection in Angular

Angular's change detection mechanism automatically updates the view when the underlying data changes. However, in certain scenarios, such as dealing with large datasets or computationally expensive operations, the default change detection can become inefficient. This challenge asks you to implement a custom change detection strategy that selectively updates components based on specific criteria, optimizing performance.

Problem Description

You need to create an Angular component that utilizes a custom change detection strategy. The component will display a list of items, each with a name and a value. The data for these items will be provided as an array of objects. Instead of Angular's default change detection, you will implement a mechanism that only updates the view for items whose values have changed since the last update. This selective update should avoid re-rendering the entire list when only a few items have been modified.

Key Requirements:

Custom Change Detection Strategy: Implement a ChangeDetectorStrategy that only updates the view when the value property of an item changes.
Data Source: The component should receive an array of item objects as input. Each object should have a name (string) and a value (number) property.
Selective Updates: The view should only be updated for items whose value has changed compared to the previous render.
Immutability: Assume the input data array is immutable. Changes to the data will be a new array being passed to the component.
Performance: The custom change detection should demonstrably improve performance compared to the default change detection when a large number of items are present and only a small subset of them change.

Expected Behavior:

The component should initially render all items in the input array.
When a new array of items is provided as input, the component should compare the value property of each item with its previous value.
Only items whose value has changed should be re-rendered.
Items whose value remains the same should not be re-rendered.
The component should efficiently handle large datasets (e.g., 1000+ items) without significant performance degradation.

Edge Cases to Consider:

Empty Input Array: The component should handle an empty input array gracefully, rendering nothing.
Initial Render: The first render should display all items, as there are no previous values to compare against.
Data Type Consistency: Ensure the value property is consistently a number.
Large Datasets: Test with a large number of items to verify performance improvements.

Examples

Example 1:

Input:  [
  { name: 'Item 1', value: 10 },
  { name: 'Item 2', value: 20 },
  { name: 'Item 3', value: 30 }
]

Output:  (Component renders all three items)
Explanation: Initial render - all items are displayed.

Example 2:

Input: [
  { name: 'Item 1', value: 10 },
  { name: 'Item 2', value: 25 },
  { name: 'Item 3', value: 30 }
]

Output: (Component only updates Item 2 - Item 1 and 3 remain unchanged)
Explanation: Only Item 2's value has changed (from 20 to 25), so only that item is re-rendered.

Example 3: (Large Dataset)

Input: (Array of 1000 items, with only one item's value changed)

Output: (Component only updates the single changed item)
Explanation: Demonstrates the performance benefit of selective updates with a large dataset.

Constraints

Angular Version: Angular 14 or higher.
Performance: The custom change detection strategy should demonstrate a measurable performance improvement (e.g., reduced rendering time) compared to the default change detection when updating a large dataset (at least 1000 items) where only a small percentage of items change (e.g., 1-5%). You can use Angular's DevTools to measure rendering time.
Immutability: The input data array is treated as immutable. A new array is passed on each update.
No External Libraries: Do not use any external libraries for change detection. The solution must be implemented using Angular's built-in features.

Notes

Consider using OnPush change detection strategy as a starting point, but you'll need to implement the custom logic for comparing values.
Think about how to efficiently store and compare the previous values of the items. A simple object or map could be useful.
Focus on minimizing unnecessary re-renders to achieve the desired performance improvement.
The goal is to demonstrate a selective update strategy, not to completely disable change detection.