CDK Virtual Scrolling wrong values seen when scrolling due to components having injected...

I have an Angular16 Application that is using Angular's CDK virtual scrolling module - https://material.angular.io/cdk/scrolling/overview.

The components being scrolled (lets say ProductComponent) have child components that use Angular token injection to access a property from its parent, one particular instance (lets say ProductNameComponent) is showing the wrong product name after scrolling.

So, I have displayed the name within the ProductComponent (on the right side) and displayed the name as a button within the ProductNameComponent (on the left side), having scrolled up and down a few times you start to notice the names start to differ.

Having dug around for a while I have verified the name displayed by the ProductComponent is correct, its just the ProductNameComponent that is wrong.

I have reproduced my issue in Stackblitz as cant share the real code, and I found it works when using Input bindings to pass the object down to the ProductNameComponent but not when using the injection approach as per the current implementation.

I was hoping I could get this working as is with the injection approach, but I've not been able to resolve this issue... so it is reproduced in Stackblitz here, if anyone can direct me that would be great.

https://angular-cdk-demo-virtual-scroll-nrnsxq.stackblitz.io



I initially tried triggering change detection after scrolling, but now it seems as it caches components the injection is somehow impacting what is being displayed

Continue reading...