angular virtual scroll doesn't re-render the list when list item added/removed

Issue

It is currently part of my project. If you click on a list item, the visibility of the item is toggled. Many lists seem to render well using the virtual scroll of the angle, but there is a problem when a large number of items in the list are deleted. The virtual scroll does not refresh, leaving free space in the middle. Viewport refresh is required whenever an item is added or deleted.The list data I use is not Observerable data. Please tell me how to solve the problem.

https://stackblitz.com/edit/angular-ivy-o9dhar?file=src%2Flist%2Flist.component.html

my problem

Solution

You will have to update the source to make it work. problem for toggle is that you will need to replace it with something of similiar hight. They do have dynamic height in experimental at angular cdk for quite a while now. But for removing you can do something simple like this. Key part is just update the source so it can rerender the list

export class ListComponent {
  @Input()
  ListData: any[];
  remove(element) {
    this.ListData = this.ListData.filter((x) => x != element);
  }
}

item

export class ListItemComponent {
  @Input()
  element;

  @Output('remove')
  onListItemClicked = new EventEmitter();

  toggleVisibility() {
    this.onListItemClicked.emit(this.element);
  }
}

list.component.html

<cdk-virtual-scroll-viewport class="list-container" itemSize="30">
  <div *cdkVirtualFor="let data of ListData">
    <list-item [element]="data" (remove)="remove($event)"></list-item>
  </div>
</cdk-virtual-scroll-viewport>

https://stackblitz.com/edit/angular-ivy-tntnpm?file=src%2Flist%2Flist.component.ts

From the comment: Appending you still set a new object here is a simple way based on your stackblitz link.

const newItem = {
     id: Number(this.input.nativeElement.value) + 1,
     title: `item ${Number(this.input.nativeElement.value) + 1}`,
     isShow: true,
};
this.favoriteList = [newItem,...this.favoriteList] // instead of splice

Answered By - Henrik Bøgelund Lavstsen