Scrolling SDK (virtual-scroll) - View isn't updated when list is updated (items added/removed)

[Gil-Epshtain]

What is the expected behavior?

If a data-list that binded to <cdk-virtual-scroll-viewport>, is updated (items are added/ removed from this list), the <cdk-virtual-scroll-viewport> updated as well.

What is the current behavior?

Changing the list will not updated the view (<cdk-virtual-scroll-viewport>)

What are the steps to reproduce?

StackBlitz starter: https://stackblitz.com/edit/angular-hsr4tz?file=app%2Fcdk-virtual-scroll-overview-example.html

In this demo you can see that after adding items to the list, the view isn't updated.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 7.1.4
Material 7.2.0
Browser: Chrome

Is there anything else we should know?

The documentation doesn't discuss about adding/removing items from data-list.
See docs at: https://material.angular.io/cdk/scrolling/overview

[klew582]

when will this fix be released?

[elgs]

Try this:

add() {
    this.items.push('NEW - ' + this.items.length);
    this.items = [...this.items];
}

https://stackblitz.com/edit/angular-hsr4tz-mz26wq

[Gil-Epshtain]

@elgs - I like your answer, you can even make it one-liner with:
this.items = [...this.items, ('NEW - ' + this.items.length)];

However, you need to remember that "virtual-scroll" directive purpose is to make an extremely long (thousands items or even more) list to be more smooth. But if each time you need to "Add" an item, you regenerate the whole list... then you lose the purpose of this directive, since re-creating the whole list each time you add an item, is very inefficient.

[elgs]

@Gil-Epshtain agreed!

@crisbeto any chance to get any update about this fix? Thanks.

[elgs]

@Gil-Epshtain from my experience, this workaround is actually not bad, I mean, performance wise. The selling point of the virtual scroll is to swap in/swap out rendered items from the backed full item list. With this workaround, the backed full item list got completely redone, but the rendered window (of 50, let's say) of items remains 50. It may not be ideal, but this actually does not affect the selling point of the scroll view. My $.02.

[elgs]

However, you need to remember that "virtual-scroll" directive purpose is to make an extremely long (thousands items or even more) list to be more smooth.

This statement is true.

But if each time you need to "Add" an item, you regenerate the whole list... then you lose the purpose of this directive, since re-creating the whole list each time you add an item, is very inefficient.

No, you missed the point how the scroll view works. The scroll view has two parts: 1) The backing full list of items (could be thousands of), 2) the small amount of rendered items in DOM (like 50 items). The point of the scroll view is to prevent the thousands of items from being poured in the DOM. Copying the references of each items from the old backed list to a new list is actually cheap (though not ideal), the expensive part is rendering DOMs in the browser. In this case, you only redo the backed list, but the number of rendered DOM remain unchanged, so you don't lose the purpose of this directive.

[Gil-Epshtain]

@elgs - I think the best way to test this is with a real world example - once I've implement this - I'll return with conclusions

[renaoliveira]

@Gil-Epshtain you can force a detect changes to update the virtual scroll from ChangeDetectionRef.detectChange(), this method force the view to detect the changes. That can update the virtual-scroll list;

 @Component({
      selector: 'app-component',
      templateUrl: './app-component.html',
      styleUrls: ['./app-component.scss'],
      changeDetection: ChangeDetectionStrategy.OnPush /* This is a strategy to detect changes by 
      demand,  it isn't necessary to your case;*/
 })

 items: AppComponentItems[] = [];

 constructor(changeDetectorRef: ChangeDetectorRef){}

 addItem(){
      items.push(newItem);
      changeDetectorRef.detectChange();
 }