Open michaelsanford opened 5 years ago
Hi Michael, it is not a defect of Angular. Virtual scroll uses cache to reuse components, but your component is not reusable. Look at my explanation for another issue - you have the same case
https://github.com/angular/components/issues/16330#issuecomment-514591282
Solution can look like this (but state will be lost):
@Component({
selector: 'hello',
template: `<h1 [class.active]="active">Data Item {{_item}}</h1>`,
styles: [
`.active {background-color: red; color: white}`,
`h1:hover { background-color: lightblue }`
]
})
export class HelloComponent {
@Input() set item(item: number) {
this._item = item;
this.active = false;
}
_item: number;
active: boolean = false;
toggle = () => this.active = !this.active;
}
@ArtemKlots While I agree that this is not a defect by virtue of it being a design choice, I still think it might be a good idea to highlight this behaviour in the documentation more clearly, which was the point of this ticket.
I suppose I could do that at this point.
I got the same exact "bug" today. The documentation at https://material.angular.io/cdk/scrolling/overview#virtual-scrolling should definitively be updated with information about this behavior.
What is the expected behavior?
New components rendered by
CdkVirtualForOf
are pristine by default.What is the current behavior?
New components created by
CdkVirtualForOf
within the<cdk-virtual-scroll-viewport>
inherit internal state of recycled views by default.What are the steps to reproduce?
https://stackblitz.com/edit/angular-virtual-scrolling-with-component-state
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Is there anything else we should know?
Surely this is the very intent of view recycling, but it seems very strange that the default behaviour of
*cdkVirtualFor
is very different from*ngFor
: my bound parameters changed, the data rendered via the@Input()
changed, so why didn't the internal state reset?It's more than template caching, which most of us would take to mean the HTML: it caches whole components and internal state.
Obviously, setting
templateCacheSize: 0
fixes this problem.Maybe simply highlighting this in the documentation might help, since you have to read between the lines to understand what's happening? Perhaps I'm the only one with this expectation. 🤷♂️