vmuresanu
commented
2 years ago I tried to reproduce this issue with Angular 12 and 13 and the behavior is the same, so I don't think that it is a Regression Issue. You have to use *cdkVirtualFor outside of the child-comp and pass an individual item to it. Child comp has to be dumb component and accept only input. This way, OnPush strategy works and makes sense.
<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
<ng-container *cdkVirtualFor="let item of items">
<child-comp [item]="item"></child-comp>
</ng-container>
</cdk-virtual-scroll-viewport>Also in all demo examples the approach is the same, please see https://material.angular.io/cdk/scrolling/overview
Is this a regression?
The previous version in which this bug was not present was
No response
Description
I have a parent component where I have cdk-virtual-scroll-viewport. Inside the parent component I have a child component that takes the array from the parent as input. So, in this case, cdkVirtualFor is in the child component. I also have ChangeDetectionStrategy.OnPush on both the parent and child components. However, the view is empty (not updated) unless I remove ChangeDetectionStrategy.OnPushon the child component or unless I use ngFor instead of cdkVirtualFor.,
Reproduction
https://stackblitz.com/edit/angular-ad81nf?file=src%2Fapp%2Fchild-component.ts,src%2Fapp%2Fapp.module.ts,src%2Fapp%2Fcdk-virtual-scroll-overview-example.html
Expected Behavior
I expected the view to be updated when the child's input changes even with ChangeDetectionStrategy.OnPush
Actual Behavior
The view does not update even when the child component receives the input from the parent.
Environment
See stackblitz for dependencies Chrome Version 102.0.5005.115